使用css实现瀑布流并不实用,因为css实现的瀑布流都是以列来排列的,这里记录下用js实现瀑布流,以及微信小程序中使用左右两列来实现瀑布流
1.效果图
2.原生js实现瀑布流
<div id="root">
<div class="item">
<div class="itemImg">
<img src="../images/1.jpeg" alt="" />
</div>
</div>
<div class="item">
<div class="itemImg">
<img src="../images/3.jpeg" alt="" />
</div>
</div>
<div class="item">
<div class="itemImg">
<img src="../images/2.jpg" alt="" />
</div>
</div>
</div>
*{
margin: 0;
padding: 0;
}
#root{
position: relative;
}
.item{
float: left;
padding: 5px;
}
/* 添加阴影的时候,加上border会显得更加有点悬浮感 */
.itemImg{
padding: 5px;
border: 1px solid #ccc;
box-shadow: 0 0 5px #ccc;
border-radius: 5px;
}
.itemImg img{
width: 230px;
height: auto;
}
window.onload = function () {
/* 计算图片列数及获取最小高度图片 */
generateImg('root', 'item');
/* 对窗口大小改变进行监听,大小改变则重新布局 */
window.addEventListener('resize', function() {
generateImg('root', 'item')
});
/* 图片对象 */
let imgData = {
images: [
{
"src":"23.png"
},
{
"src":"22.png"
},
{
"src":"2.jpg"
},
{
"src":"4.jpg"
},
{
"src":"7.jpg"
}
]
};
/* 对滚动监听 */
window.addEventListener('scroll', function() {
if(checkIsScroll()) {
let rootElement = document.getElementById('root&#