使用js来实现瀑布流效果

瀑布流的实现方法有很多种，我这次采用的是使用绝对定位的方法来实现。页面中包含一个容器ul（设置为relative），然后所有添加的li都放在这个容器里面，li的宽度固定。在li进行显示的时候，是我们要先计算出总的列数，然后根据列数跟每列的宽度计算出容器的总宽度。显示li的时候就是从左往右填充各列，当第一行填充满了之后，就会寻找最短列，然后把li添加到最短列中。当屏幕发生变化的时候，又会重新排列。

步骤
创建ul，并对其样式做简单的设置
#wrap{
width: 1800px;
list-style: none;
margin: 0 auto;
position: relative;

}

wrap li{

position: absolute;
width: 200px;
text-align: center;
background: -webkit-linear-gradient(left,white 1%,green 30%,lightgreen 50%,purple 80%);
transition: all 1s;
color: yellow;

}

这里，我对li的背景颜色做了渐变，只是无聊，随便写写，哈哈哈

添加Li之前需要计算列数，为了避免所有的li都连载一起，所以我在中间加了一点间隔。

var padding = 10;
var width = 200;
var windowWidth = document.documentElement.clientWidth;
var cols = parseInt(windowWidth/(width+padding*2));

为了显示美观，我设置了一下ul的宽度

document.getElementById("wrap").style.width = cols(width+padding2) + "px";
列数已经知道，现在需要知道li的高度，li的高度是随机的，所以我写了一个简单的获取随机数函数

function randomHeight(min,max){
return (Math.random()*(max-min)+min);
}

li的添加过程需要获取每列的高度，并把新添加的li放入最短列中，那么就需要计算每列的高度。因此，我声明了一个空数组来存放高度，然后初始化数组

var heightArray = [];
for(var i = 0; i < cols; i++){
heightArray[i] = 0;
}

在添加li的同时不断改变高度数组中的值，然后获取最小高度列，这样就能够找到li添加的位置

var minheight = heightArray[0];
var index = 0;
for (var j = 0; j < heightArray.length;j++) {
if(minheight > heightArray[j]){
minheight = heightArray[j];
index = j;
}
}

假设了最小高度与其对应的下标，通过循环，来确定最终的下标。li的位置确定好，就应该添加了，通过列数和间距以及高度，来设置它的left和top的值。

li.style.left = (width + padding2)index + padding + "px";
heightArray[index] += height + 2*padding;

因为是定位，所以还要设置ul的高度，所以在获取最小高度的同时也要获取最大高度maxHeight；同时当屏幕变化的时候，li的位置需要改变，所以，将上述过程放在函数中,同时，为了确定li是否存在，所以又创建了两个数组来存放li和它的高度，最终代码如下：

function randomHeight(min,max){
return (Math.random()(max-min)+min);
}
var width = 200;
var padding = 10;
var wrap = document.getElementById('wrap');
//定义一个数组,存放Li的数组
var lis = [];
//存放li高度的数组
var lisHeight = [];
function createLi(number,flag){
//获取当前窗口可视宽度
var windowWidth = document.documentElement.clientWidth;
//计算当前窗口可视区域所能放置最大列数
var cols = parseInt(windowWidth/(width+padding2));
document.getElementById("wrap").style.width = cols(width+padding2) + "px";
var heightArray = [];
for(var i = 0; i < cols; i++){
heightArray[i] = 0;
}
for (var i = 0;i < number; i++) {
var li = lis[i] || document.createElement("li");
li.innerHTML = "hello world";
var height = lisHeight[i] || randomHeight(100,300);
li.style.height = height + "px";
li.style.lineHeight = height + "px";
if(flag){
lis.push(li);
lisHeight.push(height);
}

    //获取最短列
var minheight = heightArray[0];
var maxheight = 0;
var index = 0;
for (var j = 0; j < heightArray.length;j++) {
    if(minheight > heightArray[j]){
        minheight = heightArray[j];
        index = j;
    }
    if(maxheight < heightArray[j]){
        maxheight = heightArray[j];
    }
}
document.getElementById("wrap").style.height = maxheight+ "px";
        //查询li位置
li.style.top = heightArray[index] + "px";
li.style.left = (width + padding*2)*index + padding + "px";
heightArray[index] += height + 2*padding;
if(flag){
    wrap.appendChild(li);
}      

}
}
createLi(100,true);
window.onresize = function(){
createLi(100,false);
}