html li 做瀑布流,使用js来实现瀑布流效果

使用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);

}