直接上代码：
<!DOCTYPE html>
<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>
<style>
img {
border:none;
}
.wrapper {
width:1000px;
margin:0 auto;
}
.wrapper h3{
color:#3366cc;
font-size:16px;
height:35px;
line-height:1.9;
text-align:center;
border-bottom:1px solid #E5E5E5;
margin:0 0 10px 0;
}
#con1_1 {
position:relative;
}
#con1_1 .product_list {
position:absolute;
left:0px;
top:0px;
overflow: hidden;
background:#eee;
margin:5px;
cursor: pointer;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.product_list img {
width:200px;
}
.product_list p {
padding:5px 0px;
font-size:12px;
text-align:center;
color:#333;
white-space:normal;
width:200px;
}
</style>
</head>
<body>
<div class=\公众wrapper\公众>
<h3>蘑菇街</h3>
<div id=\公众con1_1\"大众>
</div>
</div>
<script src=\"大众js/jquery-1.11.0.js\"大众></script>
<script type=\"大众text/javascript\公众>
// 自己仿照的数据
var data ={
\公众1\"大众:{
id:1,
img:\"大众img1.jpg\"大众,
info_dec:\公众今年的宫廷风真的是好看到弗成 驾驭也超大略\"大众
},
\"大众2\公众:{
id:2,
img:\"大众img2.jpg\"大众,
info_dec:\"大众格局都显腰身又遮肉 搭配一件短毛的外套\公众
},
\公众3\公众:{
id:3,
img:\"大众img3.jpg\公众,
info_dec:\公众舒适又不减时尚 随意的搭配小单品\公众
},
\公众4\"大众:{
id:4,
img:\公众img4.jpg\公众,
info_dec:\"大众过年走亲戚都夸的优雅风鸭\"大众
},
\"大众5\公众:{
id:5,
img:\"大众img5.jpg\"大众,
info_dec:\"大众既适宜通勤又适宜日常～鞋子和包包都是我平时常搭配的款\"大众
},
\"大众6\"大众:{
id:6,
img:\公众img6.jpg\"大众,
info_dec:\公众久等啦，战狼女孩闪现✨前一天还不太适应沙漠，但一早起来看到日出真的超美，瞬间好心情！
换身最大略不过的白T+牛仔裤+球鞋，come on来拍一张！
\"大众
},
\公众7\"大众:{
id:7,
img:\"大众img7.jpg\"大众,
info_dec:\"大众黄色小白鞋 鞋型很显脚瘦 走路又轻便 鞋带春天迎春花的颜色～满满的活力 颜色清新百搭的小白鞋 你get了吗？整体黄色系为主 就不会很乱呢休闲穿搭❤️\公众
},
\"大众8\公众:{
id:8,
img:\公众img8.jpg\"大众,
info_dec:\"大众外搭是一件菱格马甲，针织毛线的，学院风很浓，试穿S码合身。外套是一件黄色的牛角扣连帽大衣，宽松的格局，试穿S码合身，长度对小个子也还算友好。<br>\公众
},
\"大众9\"大众:{
id:9,
img:\"大众img9.jpg\"大众,
info_dec:\公众我为开春做了哪些准备#复古学院风的牛角扣大衣穿搭Hello大家好，这里是大鱼穿搭测评第645期，这一期和大家分享的是牛角扣外套穿搭。\"大众
},
\"大众10\"大众:{
id:10,
img:\"大众img10.jpg\"大众,
info_dec:\"大众❤️身高体重163|43，给大家做个参考。：内搭是米色元宝领衬衣，减龄复古，百搭的格局啦。\公众
},
\"大众11\公众:{
id:11,
img:\"大众img11.jpg\"大众,
info_dec:\"大众：鞋子是有跟的乐福鞋，比较日系复古百搭，推举啦。❤️喜好记得给我点赞留言哦！
！
\"大众
},
\"大众12\"大众:{
id:12,
img:\公众img12.jpg\"大众,
info_dec:\"大众：内搭的半身裙是蓝色格子的百褶裙，短款有里衬，显瘦高型腰A字版。\"大众
},
\"大众13\公众:{
id:13,
img:\公众img13.jpg\"大众,
info_dec:\"大众上身胖的MM不用再愁冬天怎么穿啦！
最显瘦的穿搭指南在这里！
\"大众
}
,
\"大众14\公众:{
id:14,
img:\"大众img14.jpg\公众,
info_dec:\"大众亮橙色毛衣搭配绿色格纹围巾很有辨识度~ 搭配晒伤仿妆在冬日也要散发阳光能量\"大众
},
\公众15\公众:{
id:15,
img:\"大众img15.jpg\"大众,
info_dec:\"大众这是我参加小年会的dress code，all black玄色主题♠️我在玄色里加入了bling bling的金属色让全体look看着不会过于沉重，来自MXU的修身设计春款外套真的超级显瘦，肩部开叉和斜侧系带增加设计感，金属色鞋子与内搭相呼应，让整体搭配舒畅且折衷～\"大众
},
\"大众16\"大众:{
id:16,
img:\公众img16.jpg\"大众,
info_dec:\公众少女感赛高，过年就靠它取胜了\"大众
}
}
// 遍历数据插入构造里
$(function(){
var str = \"大众\"大众;
for(var attr in data){
//console.log(data[attr].img);
str += `
<div class=\"大众product_list\"大众>
<a href=\"大众#\公众><img src=\"大众images/${data[attr].img}\"大众/></a>
<p>${data[attr].info_dec}</p>
</div>
`
}
$(\"大众#con1_1\公众).html(str);
/
事理：1.把所有的li的高度值放到数组里面
2.第一行的top都为0
3.打算高度值最小的值是哪个li
4.把接下来的li放到那个li的下面
/
var margin = 10;//设置间距
var li=$(\"大众.product_list\公众);//区块名称
var li_W = li[0].offsetWidth+margin;//取区块的实际宽度
function liuxiaofan(){
var h=[];//记录区块高度的数组
var n = 960/li_W|0;
for(var i = 0;i < li.length;i++) {
li_H = li[i].offsetHeight;//获取每个li的高度
if(i < n) {//n是一行最多的li，以是小于n便是第一行了
max_H =Math.max.apply(null,h);
h[i]=li_H;//把每个li放到数组里面
li.eq(i).css(\公众top\公众,0);//第一行的Li的top值为0
li.eq(i).css(\"大众left\"大众,i li_W);//第i个li的左坐标便是ili的宽度
}
else{
min_H =Math.min.apply(null,h) ;//取得数组中的最小值，区块中高度值最小的那个
minKey = getarraykey(h, min_H);//最小的值对应的指针
h[minKey] += li_H+margin ;//加上新高度后更新高度值
li.eq(i).css(\公众top\公众,min_H+margin);//先得到高度最小的Li，然后把接下来的li放到它的下面
li.eq(i).css(\"大众left\公众,minKey li_W); //第i个li的左坐标便是ili的宽度
}
// $(\"大众p\"大众).eq(i).text(\"大众高度：\公众+li_H);//把区块高度值写入对应的区块H2标题里面
}
max =Math.max.apply(null,h) ;
$(\"大众#con1_1\公众).css(\"大众height\公众,max);
}
/ 利用for in运算返回数组中某一值的对应项数(比如算出最小的高度值是数组里面的第几个) /
function getarraykey(s, v) {for(k in s) {if(s[k] == v) {return k;}}}
/这里一定要用onload，由于图片不加载完就不知道高度值/
window.onload = function() {liuxiaofan();};
window.onresize = function() {liuxiaofan();};
//鼠标在上样式
$(function(){
$(\"大众.product_list\公众).hover(function(){
$(this).css(\公众background-color\公众,\"大众#ddd\"大众);
},function() {
$(this).css(\公众background-color\"大众,\"大众#eee\"大众);
});
});
})
</script>
</body>
</html>
效果图：（实在也可以边向下滚动边加载，大家可以自己写下。）
