基于JavaScript实现瀑布流布局(二)
前端之家收集整理的这篇文章主要介绍了
基于JavaScript实现瀑布流布局(二)，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
本文实例讲解了JavaScript实现瀑布流布局详细代码，分享给大家供大家参考，具体内容如下
1.建立Html模版
想法是先用一个div container承载所有内容,然后div Box用来放置图片,最后div Box_border来当图片框,代码如下
<
Meta charset="UTF-8">
瀑布流
Box_border" id="
Box_border">
<div class="<a href="/tag/Box/" target="_blank" class="keywords">Box</a>" id="<a href="/tag/Box/" target="_blank" class="keywords">Box</a>1">
<img src="image/01.jpg">
</div>
</div>
2.通过css简单设置样式
主要设置水平放置,相框颜色,边界之类的
<div class="jb51code">
<pre class="brush:css;">
/
边界不留空,背景黑灰
/
body{
margin: 0px;
background: darkgray;
}
/
总布局设置为相对布局
/
.container{
position: relative;
}
/
设置Box属性
/
.Box{
padding: 5px;
float: left;
}
/设置图片边框阴影和圆角
/
.Box_border{
padding: 5px;
border: 1px solid #cccccc;
Box-shadow: 0px 0px 5px #ccc;
border-radius: 5px;
}
/设置图片格式/
.Box_border img{
width: 150px;
height: auto;
}
3.JS控制每一行所摆放的图片个数
上面的css布局之后,浏览器窗口大小改变,里面的图片数量也会改变,现在要用JS固定住每一行的图片数量,对于不同尺寸的屏幕都能做到很好的效果
<div class="jb51code">
<pre class="brush:js;">
/
用于加载其他函数
/
window.onload = function(){
setImgLocation("container");
}
/
设置图片个数
/
function setImgLocation(parent){
var cparent = document.getElementById(parent);//得到父节点
var childArray = getChildNodes(cparent);//得到图片数量
var imgWidth = childArray[0].offsetWidth;//获取照片宽度
var screenWidth = document.documentElement.clientWidth;//获取浏览器宽度
var count = Math.floor(screenWidth/imgWidth);//每行的个数
cparent.style.cssText = "width:"+count*imgWidth+"px;margin: 0 auto;";//设置其宽度并居中
}
/
获取全部图片的个数
/
function getChildNodes(parent){
var childArray =[];//定义一个数组存放图片Box
var tempNodes = parent.getElementsByTagName("*");//获取父节点下的所有节点
//循环添加class为Box的节点
for(var i = 0;i<tempNodes.length;i++){
if(tempNodes[i].className == "Box"){
childArray.push(tempNodes[i]);
}
}
return childArray;//返回所有的子节点
}
注意:针对不同屏幕大小显示的个数是不一样的
4.JS实现静态瀑布流
先实现静态的布局,也就是浏览器下拉不会自动刷新出新的图片.
实现排列算法很简单
- 1.把第一排图片的高度全部存到一个数组
- 2.计算出第一排中的图片的最小高度和对应位置
- 3.把第一排之后的第一个图片放到该位置上
- 4.重新设置该位置的高度为两个图片相加
- 5.循环2剩余全部图片
代码:
函数
*/
window.onload = function(){
setImgLocation("container");
}
/*
设置
图片个数及位置排列
*/
function setImgLocation(parent){
var cparent = document.getElementById(parent);//得到父节点
var childArray = getChildNodes(cparent);//得到
图片数量
var imgWidth = childArray[0].offsetWidth;//
获取照片宽度
var screenWidth = document.documentElement.clientWidth;//
获取浏览器宽度
var count = Math.floor(screenWidth/imgWidth);//每行的个数
cparent.style.cssText = "width:"+count*imgWidth+"px;margin: 0 auto;";//设置其宽度并居中
//定义数组,存放第一行照片高度
var imgHArray = [];
//循环遍历
图片
for(var i=0;i
图片在第一行则获取高度
if(i图片
{
var minHeight = Math.min.apply(null,imgHArray);//获取最小高度
var minIndex = getMinIndex(minHeight,imgHArray);//获取最小高度对应的下标
childArray[i].style.position = "absolute";//设置要填充的图片盒子为绝对布局,否则不能更换位置
childArray[i].style.top = minHeight+"px";//设置要填充图片距顶高度
childArray[i].style.left = childArray[minIndex].offsetLeft+"px";//设置要填充图片距左高度
imgHArray[minIndex] += childArray[i].offsetHeight;//填充后把当前位置高度设为两个图片相加
//开始下一轮循环
}
}
}
/
获取最小高度对应的下标
/
function getMinIndex(minHeight,imgHArray){
for(var i in imgHArray){
if(imgHArray[i] == minHeight){
return i;
}
}
}
/
获取全部图片的个数
/
function getChildNodes(parent){
var childArray =[];//定义一个数组存放图片Box
var tempNodes = parent.getElementsByTagName("*");//获取父节点下的所有节点
//循环添加class为Box的节点
for(var i = 0;i<tempNodes.length;i++){
if(tempNodes[i].className == "Box"){
childArray.push(tempNodes[i]);
}
}
return childArray;//返回所有的子节点
}
5.js实现动态加载
动态加载也就是滚动条永远滑不到底部,要解决动态加载我们需要考虑两个问题:
1）.什么时候加载?
滑动距离+浏览器高度>最后一张图片距离顶部的距离
2）.怎样加载?
通过创建新的节点,把创建的节点添加进去即可
最终代码:
函数
*/
window.onload = function() {
var cparent = document.getElementById("container");//得到父节点
setImgLocation(cparent);
//设置加载的
图片
var data = ["image/01.jpg","image/02.jpg","image/03.jpg","image/04.jpg","image/05.jpg","image/06.jpg","image/07.jpg","image/08.jpg","image/09.jpg","image/11.jpg","image/12.jpg","image/13.jpg","image/14.jpg","image/15.jpg","image/16.jpg","image/17.jpg"];
//滑动监听
window.onscroll = function () {
if (checkLoad(cparent)) {
for (var i = 0; i < data.length; i++) {
//创建新的节点
var div1 = document.createElement("div");
div1.className = "
Box";
var div2 = document.createElement("div");
div2.className = "
Box_border";
var img = document.createElement("img");
img.className = ".
Box_border img";
img.src = data[i];
div2.appendChild(img);
div1.appendChild(div2);
cparent.appendChild(div1);
}
setImgLocation(cparent);//创建节点后重新排列
}
}
}
/
检查是否应该加载
/
function checkLoad(cparent){
var childArray = getChildNodes(cparent);//得到图片个数
var lastImgHight = childArray[childArray.length-1].offsetTop;//得到最后一张图片距离顶部高度
var scrollHeight = document.documentElement.scrollTop||document.body.scrollTop;//获得滑动距离(浏览器兼容性真烦人)
var browserHeight = document.documentElement.clientHeight;//获得浏览器高度
if(lastImgHight < scrollHeight+browserHeight){//判断是否加载
return true;
}else {
return false;
}
}
/
设置图片个数及位置排列
/
function setImgLocation(cparent){
var childArray = getChildNodes(cparent);//得到图片数量
var imgWidth = childArray[0].offsetWidth;//获取照片宽度
var browserWidth = document.documentElement.clientWidth;//获取浏览器宽度
var count = Math.floor(browserWidth/imgWidth);//每行的个数
cparent.style.cssText = "width:"+countimgWidth+"px;margin: 0 auto;";//设置其宽度并居中
//定义数组,imgHArray){
for(var i in imgHArray){
if(imgHArray[i] == minHeight){
return i;
}
}
}
/
获取全部图片的个数
/
function getChildNodes(parent){
var childArray =[];//定义一个数组存放图片Box
var tempNodes = parent.getElementsByTagName("");//获取父节点下的所有节点
//循环添加class为Box的节点
for(var i = 0;i<tempNodes.length;i++){
if(tempNodes[i].className == "Box"){
childArray.push(tempNodes[i]);
}
}
return childArray;//返回所有的子节点
}
