图片瀑布流

最新推荐文章于 2024-04-23 03:39:20 发布

麦_子

最新推荐文章于 2024-04-23 03:39:20 发布

阅读量725

点赞数

文章标签： javascript js加载图片瀑布流图片瀑布流

本文链接：https://blog.csdn.net/H5_wheat/article/details/53520077

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-2.2.3.min.js">
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#flow {
list-style: none;
margin: 0 auto;
position: relative;
}
#flow li {
position: absolute;
width: 200px;
transition: all 0.5s;
overflow: hidden;
}
#flow li img {
width: 100%;
float: left;
}
</style>
</head>
<body>
<ul id="flow"></ul>
<script type="text/javascript">
$(function() {
//高度数组，保存每个li的高度
var hs = [];
var lis = [];
//布局函数
//当我bol为假时，更新的数组
//创建或者更新li
for(var i = 2; i < 41; i++) {
var li = $("<li></li>");
//这里为了拼接图片路径,所有的图片都进行了统一的命名
li.append("<img src='img/" + i + ".jpg'>");
lis.push(li);
}                
function reHeight(bol) {
//根据图片宽度计算列数
var cols = parseInt($("body").width() / 200);
//根据列数计算ul的宽度
$("#flow").css({
"width": cols * 200
});
//定义数组,装每一列的高度
var arrH = [];
for(var i = 0; i < cols; i++) {
arrH[i] = 0;
}
for(var i = 0; i < lis.length; i++) {
//最短列的高度
var minH = arrH[0];
//最短列的列号
var minI = 0;
//遍历所有列进行比较
for(var k = 0; k < arrH.length; k++) {
if(minH > arrH[k]) {
minH = arrH[k];
minI = k;
}
}
if(bol) {
$("#flow").append(lis[i]);
}
lis[i].css({
"left": minI * 200,
"top": arrH[minI]
})
arrH[minI] = arrH[minI] + lis[i].height();
}
}
window.onload = function() {
$("body").scrollTop(0);
reHeight(true);
}
//第一次创建这些li
window.onresize = function() {
//更新
reHeight(false);
}
});
</script>
</body>
</html>

下面是效果图,由于一点特殊原因,我这边没办法录制gif图,所以截取了几个静态效果,请大家见谅

麦_子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片瀑布流

* {margin: 0;padding: 0;}#flow {list-style: none;margin: 0 auto;position: relative;}#flow li {position: absolute;width: 200px;transition: all 0.5s;overflow: hidden;}#flow li img {width
复制链接

扫一扫