h5 jq实现瀑布流
Posted mcll
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了h5 jq实现瀑布流相关的知识，希望对你有一定的参考价值。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.box {
position: relative;
margin: 0 auto;
}
.item {
position: absolute;
width: 200px;
margin: 5px;
border: 1px solid #ddd;
transition: all 1s;
}
.item img {
width: 100%;
height: auto;
}
</style>
<body>
<div class="box">
<div class="item"><img
src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2241344963,3314667459&fm=26&gp=0.jpg" />
</div>
<div class="item"><img
src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2879759251,3409178712&fm=26&gp=0.jpg" />
</div>
<div class="item"><img
src="https://img-blog.csdn.net/2018071611132815?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" />
</div>
<div class="item"><img
src="https://img-blog.csdn.net/2018071611132815?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" />
</div>
<div class="item"><img
src="https://img-blog.csdn.net/2018071611132815?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" />
</div>
</div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function () {
init();
$(window).on(‘resize‘, function () {//重新加载
init();
});
})
function init() {
var boxWidth = $(".item").outerWidth(true);
// 获取每个小盒子的宽度 包括margin、padding、border
var cols = parseInt($(window).width() / boxWidth);
// 获取列数
var heightArr = [];
for (var i = 0; i < cols; i++) {
heightArr.push(0);
};
//遍历每一张图片
$(".item").each(function (index, item) {
var idx = 0;
var minBoxHeight = heightArr[0];
// 获取最小高度
for (var i = 0; i < heightArr.length; i++) {
if (heightArr[i] < minBoxHeight) {
minBoxHeight = heightArr[i];
idx = i;
// 获取最小高度的索引
}
};
// 设置图片的样式
$(item).css({
left: boxWidth * idx,
top: minBoxHeight
});
heightArr[idx] += $(item).outerHeight(true);
});
};
</script>
</html>
以上是关于h5 jq实现瀑布流的主要内容，如果未能解决你的问题，请参考以下文章