.HTML 利用封装的 jquerywaterfall.js 方法 完成
<!DOCTYPE html>
<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>瀑布流</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/jquerywaterfall.js"></script>
<script>
$(function(){
$('.items').waterFall();
});
</script> <style>
body{background:#DEE1E6}
.container{width:1200px;margin:0 auto}
.items{position:relative}
.item{width:230px;position:absolute;left:0;top:0;box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);border-radius:8px;overflow:hidden;background:#fff;margin-bottom:20px}
.item img{display:block;width:100%}
.item-text{padding:10px;font-size:14px;color:#999}
</style>
</head>
<body>
<div class="container">
<div class="items">
<div class="item">
<img src="data:images/1.jpg" alt="">
<div class="item-text">
<p class="item-title">标题</p>
<p class="item-desc">描述信息</p>
<p class="item-updataTime">发布时间</p>
</div>
</div>
<div class="item">
<img src="data:images/2.jpg" alt="">
<div class="item-text">
<p class="item-title">标题</p>
<p class="item-desc">描述信息</p>
<p class="item-updataTime">发布时间</p>
</div>
</div>
<div class="item">
<img src="data:images/3.jpg" alt="">
<div class="item-text">
<p class="item-title">标题</p>
<p class="item-desc">描述信息</p>
<p class="item-updataTime">发布时间</p>
</div>
</div>
<div class="item">
<img src="data:images/4.jpg" alt="">
<div class="item-text">
<p class="item-title">标题</p>
<p class="item-desc">描述信息</p>
<p class="item-updataTime">发布时间</p>
</div>
</div>
<div class="item">
<img src="data:images/5.jpg" alt="">
<div class="item-text">
<p class="item-title">标题</p>
<p class="item-desc">描述信息</p>
<p class="item-updataTime">发布时间</p>
</div>
</div>
<div class="item">
<img src="data:images/6.jpg" alt="">
<div class="item-text">
<p class="item-title">标题</p>
<p class="item-desc">描述信息</p>
<p class="item-updataTime">发布时间</p>
</div>
</div>
<div class="item">
<img src="data:images/7.jpg" alt="">
<div class="item-text">
<p class="item-title">标题</p>
<p class="item-desc">描述信息</p>
<p class="item-updataTime">发布时间</p>
</div>
</div>
<div class="item">
<img src="data:images/8.jpg" alt="">
<div class="item-text">
<p class="item-title">标题</p>
<p class="item-desc">描述信息</p>
<p class="item-updataTime">发布时间</p>
</div>
</div>
<div class="item">
<img src="data:images/9.jpg" alt="">
<div class="item-text">
<p class="item-title">标题</p>
<p class="item-desc">描述信息</p>
<p class="item-updataTime">发布时间</p>
</div>
</div>
<div class="item">
<img src="data:images/10.jpg" alt="">
<div class="item-text">
<p class="item-title">标题</p>
<p class="item-desc">描述信息</p>
<p class="item-updataTime">发布时间</p>
</div>
</div>
</div>
</div>
</body>
</html>
.jquerywaterfall.js
$.fn.waterFall=function(){
// 要计算每一个item元素的left、top值,宽度都是一样，不一样的是高度
//计算每一个item元素的left值，需要知道每一个item元素的宽度，以及 元素间距
let $items= $(this);
let parentWidth=$items.width();//总宽度1200px
let column = 5;//5列
let $childRen = $items.children('.item');//获取所有 item元素
let W =$childRen.width();//获取item 元素的宽度
console.log(W);
let space =(parentWidth-column*W)/(column-1);//获取 元素之间的间距
let arrHeight=[];//存储一下,一行中所有item元素的高度
$childRen.each(function(index,dom){
$dom =$(dom);
if(index<column){//计算前面5列的位置
$dom.css({top:0,left:index*(W+space)});//设置css样式
arrHeight.push($dom.height());//存储一下,一行中所有item元素的高度
}else{
//计算后面元素的位置
console.log(arrHeight);
let minIndex = 0;
//找到最矮一列的高度 以及 索引值
let minHeight= arrHeight[minIndex];
for(let i = 0 ; i<arrHeight.length ; i++){
if(minHeight>arrHeight[i]){
minHeight=arrHeight[i];
minIndex=[i];
};
}
console.log(minHeight);
//找到之后，更改item的位置
$dom.css({top:minHeight+space,left:minIndex*(W+space)});
//拿到最矮的那一列，重新赋值 因为你在最矮的一列添加了元素
arrHeight[minIndex]=minHeight+space+$dom.height();
}
});
};
效果图
