整理了一下当时学js写的一些案例，再次体验了一把用原生JS实现动态瀑布流效果的乐趣，现在把它整理出来，需要的小伙伴可以参考一下。
该案例主要是用HTML+CSS控制样式，通过JS实现全局瀑布流以及点击图片放大、上下切换效果。HTML布局写的很简单，图片加载主要是在JS中通过访问自定义的JSON字符串来实现。
动态瀑布流的原理简单理解就是把新需要加载的图片放在上一排总高度最小的图片或模块下面，实现参差不齐的多栏布局效果。
具体效果如下：
做这个案例我用了之前自己封装的框架，所以小伙伴需要到我的另一篇文章里面自己下载，链接：https://www.jianshu.com/p/e88e15ceabf3
**HTML代码：**
```
<template>
<div>
<figure>
<img src="http://www.likecs.com/{{img}}">
<p>{{info}}</p>
</figure>
</div>
</template>
<template>
<img src="http://www.likecs.com/{{src}}">
<p>{{info}}</p>
<aside>
<a href="##">上一张</a>
<a href="##">下一张</a>
</aside>
</template>
<section></section>
<div>
<img src="http://www.likecs.com/images/w_1.jpg">
<p>这是详细内容</p>
<aside>
<a href="##">上一张</a>
<a href="##">下一张</a>
</aside>
</div>
<div></div>
<span></span>
```
**css代码：**
```
*{
margin: 0;
padding: 0;
}
section.box{
margin: 0 auto;
position: relative;
font-size: 0;//行块取消间距
}
section.box div{
width: 200px;
padding: 14px 7px 0;
box-sizing: border-box;
/*float: left;*/
display: inline-block;
vertical-align: top;
}
section.box div figure{
border: 1px #cccccc solid;
border-radius: 4px;
padding: 10px;
box-shadow: 0 0 3px 1px rgba(0,0,0,.1);
}
section.box div figure img{
width: 100%;
}
section.box div figure p{
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
span.show{
position: fixed;
bottom: 0;
}
div.show_big{
background-color: #f2f2f2;
border-radius: 4px;
position: fixed;
padding: 10px;
top: 50px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
display: none;
z-index: 100;
}
div.mask{
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(101, 101, 101, 0.28);
display: none;
}
div.show_big img{
border-radius: 3px;
}
div.show_big p{
font-size: 13px;
color: #666666;
text-indent: 2em;
line-height: 17px;
margin-bottom: 10px;
overflow : hidden;/*多行文本省略号*/
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
div.show_big aside{
display: flex;
justify-content: space-around;
}
div.show_big a{
display: inline-block;
padding: 5px 13px;
background-color: #318fff;
color: white;
line-height: 17px;
text-decoration: none;
border-radius: 2px;
}
```
**JS代码:**
```
var data=[
{src:'http://www.likecs.com/images/w_1.jpg',info:'描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容'},
{src:'images/w_2.jpg',info:'描述内容'},
{src:'images/w_3.jpg',info:'描述内容'},
{src:'images/w_4.jpg',info:'描述内容'},
{src:'images/w_5.jpg',info:'描述内容'}
];
var data1=[
{src:'images/w_4.jpg',info:'描述内容'},
{src:'images/w_5.jpg',info:'描述内容'},
{src:'images/w_6.jpg',info:'描述内容'}
];
var json={data,data1};//这里是图片数据
var img_w=200;
var len;
var box=sEO.$('#box');
resize();
function resize() {
//len:每排显示的图片数目
len=parseInt((window.innerWidth-17)/img_w);
box.style.width=len*img_w+'px';//瀑布流总的宽度
}
var temp=sEO.$('#temp').innerHTML;
function load_img(arr) { //动态添加图片
var str='';
arr.forEach(function (el,i) {
str+=temp.replace('http://www.likecs.com/{{img}}',el.src).replace('{{info}}',el.info);
});
box.innerHTML+=str;
}
load_img(data);//自动加载图片带HTML中