HTML
复制代码 代码如下:
<div id="main">
<div class="box">
<div class="pic">
<img src="/UploadFiles/2021-04-02/0.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="/UploadFiles/2021-04-02/1.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="/UploadFiles/2021-04-02/2.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="/UploadFiles/2021-04-02/3.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="/UploadFiles/2021-04-02/4.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="/UploadFiles/2021-04-02/2.jpg">
</div>
</div>
</div>
CSS
复制代码 代码如下:
* {
margin: 0;
padding: 0;
}
#main {
position: relative;
}
.box {
padding:15px 0 0 15px;
float:left;
}
.pic {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0px 0px 5px #ccc;
img {
width:165px;
height:auto;
}
}
JavaScript
复制代码 代码如下:
$(window).on("load",function () {
waterfall();
var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"6.jpg"}]}
//模拟json数据;
$(window).on("scroll",function () {
if(checkScrollSlide){
$.each(dataInt.data,function (key,value) {
var oBox=$("<div>").addClass("box").appendTo($("#main"));
//jQuery支持连缀,隐式迭代;
var oPic=$("<div>").addClass('pic').appendTo($(oBox));
$("<img>").attr("src","images/"+$(value).attr("src")).appendTo(oPic);
});
waterfall();
}
})
});
//流式布局主函数;
function waterfall () {
var $boxs=$("#main>div");
//获取#main元素下的直接子元素div.box;
//获取每一列的宽度;
var w=$boxs.eq(0).outerWidth();
//outerWidth()获取包含padding和border在内的宽度;
//var w=$boxs.eq(0).width();
//width()只能获取给元素定义的宽度;
var cols=Math.floor($(window).width()/w);
//获取多少列;
$("#main").width(w*cols).css("margin","0 auto");
//设置#main元素的宽度和居中样式;
var hArr=[];
//每一列高度的集合;
$boxs.each(function (index,value) {
//遍历每一个box元素;
//为了找到之前所有元素的最低点,然后将本元素设置到最低点之下;
var h=$boxs.eq(index).outerHeight();
//每一个box元素的高,
if (index<cols) {
hArr[index]=h;
//确定每列第一个元素的高度;
} else{
var minH=Math.min.apply(null,hArr);
//得出列高数组中的最小高度;
var minHIndex=$.inArray(minH,hArr);
//$.inArray()方法得出元素(minH)在数组(hArr)中的index值;
//console.log(value);
//此时的value是第一行之后的所有的box元素的DOM对象!;
$(value).css({
//$(value):将DOM对象转换成jQuery对象,才能继续使用jQuery方法;
"position":"absolute",
"top":minH+"px",
"left":minHIndex*w+"px"
});
hArr[minHIndex]+=$boxs.eq(index).outerHeight();
//最低高元素的高度+刚添加到最低高度下的元素的高度=新的列高;
};
});
// console.log(hArr);
};
function checkScrollSlide () {
var $lastBox=$("#main>div").last();
var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
var scrollTop=$(window).scrollTop();
var documentH=$(window).height();
return (lastBoxDis<scrollTop+documentH)?true:false;
}
详细解释清仔细参考注释吧,我就不单独再拉出来写了。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 宝可梦大集结公测耿鬼怎么获取 耿鬼获取方法一览
- 宝可梦大集结国服公测有多少只宝可梦 大集结国服宝可梦一览
- 国外渲染大佬《FF7RE》新图赏
- 《夺宝奇兵》Xbox长实机公布:游戏玩法全面展示
- 《剑星》X《尼尔》联动官方图赏:永远看不腻的2B
- 甲子慧.2015-最爱【乾坤唱片】【WAV+CUE】
- 潘美辰.1993-找一个雨天【蓝与白】【WAV+CUE】
- 黄舒骏.1997-非常原创精神(南方金点系列)2CD【南方】【WAV+CUE】
- Yiruma李闰珉《怀旧十周年纪念精选集》【WAV分轨】
- 晓欣《醉爱DSD》[WAV+CUE]
- 【爵士萨克斯】RichardElliot-2016-SummerMadness【24bit-FLAC】
- 谭艳《最走心好声音HQ》马兰士德国黑胶[低速原抓WAV+CUE][1G]
- 群星《第6届 2010十大发烧唱片精选》 2CD [WAV+CUE][1.5G]
- 李梦瑶&张玮伽&谭艳&孙露 -《发烧四大天后2CD》DTS丽声 2CD [WAV分轨][2G]
- 原神海浪中的莎孚旁的幻写灵解锁方法