瀑布布局（waterflall flow）实现

　　瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动。这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格

　特点：每个图片的宽度相等，长度不同。随着窗口的宽度的改变页面上并排的数量也会改变。

第一种比较低级的js实现。

页面加载时：

window.onload=function(){

　　flall();

}

页面重载的时候：

window.onresize=function(){

　　flall();

}

实现函数：

function flall(){

//获取页面的元素

var elems = document.getElementById("box1").children;

 //设置每行的数量=parseInt(可视页面的宽度/图片的宽度)

var mun = parseInt(window.innerWidth/picWidth);

//设置水平距离=（窗口的宽度-图片的宽度）/（图片的数量+1）

var Lie_space=(window.innerWidth-num*picWidth)/num+1

//设置垂直距离(可以自定定义)

var vertical_space = 20;

//设置存放位置的数组

var arr=[];

//计算水平位置&垂直的位置放入数组

for(var i =0 ; i<num; i++){

　　arr.push[{

　　left: i * picWidth+i * Lie_space,

　　top:vertiacl_space

}];

}

//设置图片的位置

for(var i =0; i< eles.lenght;i++){

　　list[i].style.left=arr[i%num].left+"px";

　　list[i].style.top= arr[i%num].top +"px";

　　arr[i%num].top+=list[i].offsetHeight+vertiacl_spacel

}

}

　第二种：待续。。。。。

巴特西

瀑布布局（waterflall flow）实现

最新文章

热门文章