瀑布流布局

Posted 彩色积雨云

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了瀑布流布局相关的知识,希望对你有一定的参考价值。

瀑布流布局详解

   瀑布流概念:又称瀑布流式布局,是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局,最早采用此布局的是网站是Pinterest,后逐渐在国内流行。

  瀑布流原理:页面容器内的多个高度不固定的div之间按照一定的间隔参差不齐的无序浮动,鼠标滚动时不断在容器内的尾部加载数据,且自动加载到空缺位置,不断循环。

     优点:

                1.有效降低了界面复杂度,节省了空间:不再需要臃肿复杂的页面导航链接或者按钮了; 

                2.在触屏设备上交互方式有更好的用户体验,通过向上滑动进行页面滚动和数据加载,对操作的精准程度要求远远低于点击按钮或者链接;

                3.更高的参与度,使用户能更好的专注于浏览而不是操作;

       缺点:

                1.无限滚动只适用与特定类型产品中的某一类型,如某类微博信息,购物网站的某类商品,而不适用与一般的门户网站,使用需斟酌;

                2.需要打造额外的js库来保证页面数据的加载和排列,而这在一定意义上增加了在网页的性能和设备兼容等方面的问题。

  js核心思路:

   1.编写方法:获取容器内所有外层元素,存入数组;

                2.编写方法:计算容器内一行可以承载多少个元素,方法:容器宽度/元素宽度,四舍五入向下取整;

                3.编写方法:把每一行中所有元素的高度值存入数组;

                4.编写方法:在高度值数组中找到最小高度值;

                5.编写方法:把第二行第一个元素定位到上一行所有元素中高度最低的元素下面,即设置该元素的top,left,position属性;

                6.编写方法:重置当前高度值数组中的最小值;

                7.编写方法:从第二行第一个元素开始,遍历每个元素,用上述方法重新定位每个元素的位置,把该事件绑定到页面;

                8.编写方法:监听鼠标事件,当前容器内最下面一个元素的offsetTop<浏览器可视高度+已滚动高度时,加载下一页数据;

                9.加载完之后,用上述方法重新定位新加载元素的位置;

JS实现:

window.onload = function(){
waterfall(‘main‘,‘box‘);
//模拟json数据
var dataJson = {‘data‘: [{‘src‘:‘30.jpg‘},{‘src‘:‘31.jpg‘},{‘src‘:‘32.jpg‘},{‘src‘:‘33.jpg‘},{‘src‘:‘34.jpg‘},{‘src‘:‘35.jpg‘},{‘src‘:‘36.jpg‘},{‘src‘:‘37.jpg‘},{‘src‘:‘38.jpg‘},{‘src‘:‘39.jpg‘},{‘src‘:‘40.jpg‘},{‘src‘:‘41.jpg‘},{‘src‘:‘42.jpg‘},{‘src‘:‘43.jpg‘},{‘src‘:‘44.jpg‘},{‘src‘:‘45.jpg‘}]};
//监听scroll事件
window.onscroll = function(){
var isPosting = false;
if(checkScollSlide(‘main‘,‘box‘) && !isPosting){
var oParent = document.getElementById(‘main‘);
for(var i in dataJson.data){
isPosting = true;
var oBox = document.createElement(‘div‘);
oBox.className = ‘box‘;
oBox.innerhtml = ‘<div class="pic"><img src="./images/‘+dataJson.data[i].src+‘"></div>‘;
oParent.appendChild(oBox);
}
isPosting = false;
waterfall(‘main‘,‘box‘);
}
}
}
/*
* parent 父元素id clsName 块元素类*/
function waterfall(parent,clsName){
//获取父元素
var oParent = document.getElementById(parent),
//获取所有box
aBoxArr = oParent.getElementsByClassName(clsName),
//单个box宽度
iBoxW = aBoxArr[0].offsetWidth,
// 列数
cols = Math.floor(document.documentElement.clientWidth / iBoxW);
oParent.style.cssText = ‘width:‘+iBoxW*cols+‘px;margin:0 auto;‘;
//储存所有的高度
var hArr = [];
for(var i = 0; i < aBoxArr.length; i++){
if(i < cols){
hArr[i] = aBoxArr[i].offsetHeight;
}else{
//获取hArr最小值
var minH = Math.min.apply(null,hArr),
// hArr最小值索引index
minHIndex = getMinHIndex(hArr,minH);
aBoxArr[i].style.cssText = ‘position:absolute;top:‘+minH+‘px;left:‘+aBoxArr[minHIndex].offsetLeft+‘px;‘;
//添加元素之后更新hArr
hArr[minHIndex] += aBoxArr[i].offsetHeight;
}
}
}
//获取最小值索引
function getMinHIndex(arr,val){
for(var i in arr){
if(arr[i] == val){
return i;
}
}
}
//检查是否满足加载数据条件,parent 父元素id clsName 块元素类
function checkScollSlide(parent,clsName){
var oParent = document.getElementById(parent),
aBoxArr = oParent.getElementsByClassName(clsName),
// 最后一个box元素的offsetTop+高度的一半
lastBoxH = aBoxArr[aBoxArr.length - 1].offsetTop + aBoxArr[aBoxArr.length - 1].offsetHeight / 2,
//兼容js标准模式和混杂模式
scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
height = document.documentElement.clientHeight || document.body.clientHeight;
return lastBoxH < scrollTop + height ? true : false;
}

 

以上是关于瀑布流布局的主要内容,如果未能解决你的问题,请参考以下文章

[Web] 简单瀑布流布局实现

h5瀑布流布局会留白

H5 图片瀑布流布局 - vue

WPF如何实现瀑布流布局?

前端之瀑布流布局(多种实现方案)

用css3的 clomus 布局 怎么写瀑布流