图片和内容是在蘑菇街取得，本来想着把男明星出轨队的图片放进去，想想还是算了，男人何必为难男人。
直接上代码：
<!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>
<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的左坐标就是i*li的宽度
}
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的左坐标就是i*li的宽度
}
// $("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>
效果图：（其实也可以边向下滚动边加载，大家可以自己写下。）
