jq实现瀑布流

静态html代码：

jq代码：

//页面加载，触发load事件后执行waterfall函数
$(window).on("load",function(){
waterfall();
// 创建图片的数组
var dataInt={"date":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"10.jpg"},{"src":"11.jpg"}]}
// 鼠标滚动进行判断加载
$(window).on("scroll",function(){
// 是否触发加载，触发后执行函数
if(checkScrollSlide){
// 新加载的图片传递参数
$.each(dataInt.date,function(key,value){
var oBox=$("

").addClass("box").appendTo($("#main"));
var oPic=$("

").addClass("pic").appendTo($(oBox));
var oImg=$("").attr("src","img/"+$(value).
attr("src")).appendTo($(oPic));
})
// 再次调用排序函数
waterfall();
}
})
})
function waterfall(){
// 包含选择器，必须用大于号的选择器，空格会将div的所有后代都找出来。所以用大于号，选择一级div
var $boxs=$("#main>div");
// 取出每一列的宽度，取出其中一个的宽度即可，outerwidth提取的值会将包括padding，border在内的值都提取出来
var w=$boxs.eq(0).outerWidth();
// 获取当前的列数，就是浏览器当前的宽度除以某一列的宽度即为当前的列数
var cols=Math.floor($(window).width()/w);
// 设置外部容器div的宽，和样式居中
$("#main").width(w*cols).css("margin","0 auto");
var hArr=[];
// 给每个$boxs绑定each事件，代替了js当中的for循环
$boxs.each(function(index,value){
// 定义h为当前$boxs的高度,outerHeight与outerwidth属性相同
var h=$boxs.eq(index).outerHeight();
// 当
if(index hArr[index]=h
}else{
// 获取最小高度的图片的高度以及它句页面左侧的距离
var minH=Math.min.apply(null,hArr);
var minHIndex=$.inArray(minH,hArr)
// 给下一个图片设定位置
$(value).css({
"position":"absolute",
"top":minH+"px",
"left":minHIndex*w+"px"
})
// 将超过第一行的所有的图片都很据前一行最小的高度来定义位置
hArr[minHIndex]+=$boxs.eq(index).outerHeight();
}
})
}
function checkScrollSlide(){
// 找到最后一个div
var $lastBox=$("#main>div").last();
// 最后一个div的高度
var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
// 页面滚动条的高度
var scrollTop=$(window).scrollTop();
// 页面的高
var documentH=$(window).height();
// 最后一个div如果小于滚动条+页面的高度，就返回一个true
return (lastBoxDis}

 

转载于:https://www.cnblogs.com/dragon-he/p/9584007.html