Js瀑布流-自适应宽度

最近在研究JS瀑布流，过程中当然是遇到了几个问题的，但是都已成功解决啦！

关于瀑布流，我想说最重要的就是实现方法的核心算法问题！只要将核心算法搞清楚，搞正确，那就木有大问题的。

1. 首先是核心算法：

第一排显示图片个数num = 浏览器宽度clientWidth / 单张图片宽度imgWidth

下一排图片排放位置 = 从第一排最矮的那张图开始，从低到高挨个放（不懂的话请看下图哈...）

在最矮图片下边添加图片后，需要把这个最矮的高度值minHeight改变下，让指针去寻找第二矮的图，以此类推（图在下面...）

然后需要做的是实时监听浏览器宽度值，以便改变布局（图真的在下面...）

最后再模拟一个本地的循环无限加载的效果，类似百度图片（你看我没骗你吧，下面真的有图...）



2.直接上JS代码：

核心算法：

function imgLocation(parent,content){
//将parent下所有的content全部取出
var cparent = document.getElementById(parent);//获取父元素id
var ccontent = getChildElement(cparent,content);//获取所有子元素的数组集合
var imgWidth = ccontent[0].offsetWidth;//获取第一张图片宽度
var num = Math.floor(document.documentElement.clientWidth / imgWidth);//返回小于等于数字参数的最大整数，对数字进行下舍入    用浏览器宽度/图片宽度=每行图片个数
// console.log(imgWidth,num);
cparent.style.cssText = "width:"+imgWidth*num+"px;margin:0 auto";//设置html元素的style属性

var BoxHeightArr = [];//定义图片高度数组
for(var i = 0;i<ccontent.length;i++){

var minheight = 0;
var left = 0;
var minIndex;
if(i<num){
BoxHeightArr[i] = ccontent[i].offsetHeight;//每行图片的高度存到数组
left = i * imgWidth;
}else{
minheight = Math.min.apply(null,BoxHeightArr);//获取最小高度
minIndex = getminheightLocation(BoxHeightArr,minheight);//获得最小值指针
BoxHeightArr[minIndex] = BoxHeightArr[minIndex]+ccontent[i].offsetHeight;//修改这个用过的最小高度值
left = minIndex * imgWidth;
}
ccontent[i].style.position = "absolute";
ccontent[i].style.top = minheight+"px";
ccontent[i].style.left = left + "px";//将下一行图片定位到最小高度图下边
}

}

关于"i<num"这个运算，我一开始理解错了，写成了"i<=num",因此导致了图片排列重叠问题。。

。。这里解释下，“ i
”是指针，值从”0“开始计算的，不是 ”1“哦。。

 

监听浏览器滚动：

var re;
window.onresize = function() {
console.log(document.documentElement.clientWidth);
    clearTimeout(re);
    re = setTimeout(imgLocation('container','box'), 1000);

};//每隔一秒执行一次

function checkFlag(){
var cparent = document.getElementById('container');
var ccontent = getChildElement(cparent,'box');
var lastContentHeight = ccontent[ccontent.length-1].offsetTop;
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var pageHeight = document.documentElement.clientHeight||document.body.clientHeigth;
//console.log(lastContentHeight+':'+scrollTop+':'+pageHeight);
if(lastContentHeight<scrollTop+pageHeight){
return true;
}

}

模拟无限加载效果：

var imgData={'data':[{'src':'2.gif'},{'src':'1.jpg'},{'src':'3.gif'},{'src':'4.jpg'},{'src':'5.gif'},{'src':'6.jpg'},]}
window.onscroll = function(){
if(checkFlag()){
var cparent = document.getElementById('container');
for(var i=0;i<imgData.data.length;i++){
var ccontent = document.createElement('div');
ccontent.className = 'box';
cparent.appendChild(ccontent);
var boximg = document.createElement('div');
boximg.className='box_img';
ccontent.appendChild(boximg);
var img = document.createElement('img');
img.src = 'img/'+imgData.data[i].src;
boximg.appendChild(img);
}
imgLocation('container','box');
}

}

好了，至此自适应改变宽度的瀑布流效果就完成了！


谢谢欣赏！欢迎大神指点！