大致介绍
在慕课网上学习了用原生js和jQuery实现瀑布流，在这里做个笔记
用JavaScript实现
基本结构：
Box">
Box">
...
...
...
Box{
padding: 15px 0 0 15px;
float: left;
}
.pic{
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
Box-shadow: 0 0 5px #ccc;
}
思路：
3、找出这几列中高度最小的列
4、从第二行开始，设置图片为相对定位，把一张图片放到高度最小列的下面
5、更新列的高度，重复3、4、5步骤，直至图片加载完
实现：
获取元素
function getByClass(parent,clsname){
var arr = [];//用来存储获取到的所有class为Box的元素
var oElement = parent.getElementsByTagName('*');
for(var i=0;i
页面显示的列数（页面宽/Box的宽）
var oBoxW = oBox[0].offsetWidth;
var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
//设置main的宽
oParent.style.cssText = 'width:' + oBoxW*cols + 'px;margin:0 auto;';
3、找出这几列中高度最小的列
4、从第二行开始，设置图片为相对定位，把一张图片放到高度最小列的下面
5、更新列的高度，重复3、4、5步骤，直至图片加载完
Box.length;i++){
if(i图片的高度
hArr.push(oBox[i].offsetHeight);
}else{
var minH = Math.min.apply(null,hArr);
var index = getMinIndex(hArr,minH);
oBox[i].style.position = "absolute";
oBox[i].style.top = minH + 'px';
//oBox[i].style.left = oBoxW*index+'px';
oBox[i].style.left = oBox[index].offsetLeft + 'px';
//更新每列的高度
hArr[index] += oBox[i].offsetHeight;
}
}
获取每列高度最小的索引值
function getMinIndex(arr,value){
for(var i in arr){
if(arr[i] == value){
return i;
}
}
}
假设是后台给的数据
当滚动条滚动时执行
根据最后一张图片的位置，来判断是否进行加载
Box = getByClass(oParent,clsname);
var lastBoxH = oBox[oBox.length-1].offsetTop + Math.floor(oBox[oBox.length-1].offsetHeight/2);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var height = document.documentElement.clientHeight || document.body.clientHeight;
return (lastBoxH < scrollTop + height)? true:false;
}
加载图片
Box')){
var oParent = document.getElementById('main');
//将数据块渲染到当前页面的尾部
for(var i=0;iBoxs = document.createElement('div');
oBoxs.className = 'Box';
oParent.appendChild(oBoxs);
var oPic = document.createElement('div');
oPic.className = 'pic';
oBoxs.appendChild(oPic);
var oImg = document.createElement('img');
oImg.src = 'images/' + dataInt.data[i].src;
oPic.appendChild(oImg);
}
waterfall('main','Box');
}
用jQurey实现
用jQuery实现的思路都是一样的，就直接放代码
div');
var oBoxW = $oBox.eq(0).outerWidth();
var cols = Math.floor($(window).width()/oBoxW);
$('#main').css({
'width' : cols * oBoxW,'margin' : '0 auto'
});
var hArr = [];
$oBox.each(function(index,value){
var oBoxH = $oBox.eq(index).height();
if(indexdiv').last();
var lastBoxH = $lastBox.offset().top + Math.floor($lastBox.height()/2);
var scrollTop = $(window).scrollTop();
var clientH = $(window).height();
return (lastBoxH < scrollTop + clientH) ? true : false;
}
function scrollSlide(dataInt){
if(checkScrollSlide()){
$.each(dataInt.data,function(index,value){
var $Box = $('
