设计思想

在H5的布局中，只有流式布局，要么是块元素的独占一行，如下图：

块元素布局

或者是浮动的，向右排列：

浮动方式布局

而 savlattore实现的瀑布流是下面的样子。

瀑布流

看出区别没？容器1和容器4之间是直接排列下去的，而不因为容器3的高度，中间就会有很大的缝隙。

如果没理解，请认真看看上面三个图的区别。

那么salvattore是如何实现的呢？请看下图：

瀑布流解析

发现奥秘没？salvattore其实是动态生成了若干个div，然后将页面元素塞入其中，就实现了瀑布流了。

用法

现在介绍一下怎么使用。

1 页面引入salvattore.js

推荐采用bootcdn作为源。

salvattore的引入代码

2 将你的所有的容器都放入一个div中，这个div增加一个属性 data-columns

salvattore代码样例

可以看到本例子，有一系列的div（class="item"） 每个div内部有有一个图片和文字，这一系列的div就是要放入瀑布流的一系列的容器。

这些div被整体放入了一个div(id="fh5co-board")中，这个div设置了一个空属性 data-columns。这个div就是最终形成瀑布流的关键。

这样就可以用了，salvattore的引入和初始化非常简单。

3 自定义一个salvattore的css样式

样式第1部分

样式第2部分

上面的css解释一下：

1 目的是在不同大小的浏览器上展示不同列数的瀑布流

PC机上，展示4列，平板上3列，一般手机上2列，如果你的手机太小了，就1列了。

浏览器小于300px的情况

这一句是说，如果浏览器宽度小于300px的话，.column的样式就是这样的。

在data-columns的div前设置一段文字，并且样式不显示

这句话的意思是，id为fh5co-board(#fh5co-board)，且有属性名为 data-columns( [data-columns] )的标签将在其前面(::before)增加一个文本元素，元素的内容(content)是'4 .column.size-1of4'的文字，但这行文字是隐藏不可见(display:none)的。

这是干嘛呢？原来，salvattore在创建多个列的手法是这样的，它动态在要瀑布流显示的多个容器的前面增加一个文本元素，这个元素的内容会决定要创建几列瀑布流。

这里面写的 4 .column.size-1of4 的格式内容，是固定的，salvattore看到这样的文字就知道该处理成4列。

如果屏幕宽度 701px -- 850px

这句的 意思是在701px到850px宽度的浏览器上，瀑布流就处理成3列了。

动态添加容器

另外，如何动态的添加容器呢？

代码如下：

javascript代码，动态添加容器

上例：

1 采用原生js获得包含所有容器的div对象。

原生javascript

这里一定要注意，是采用原生方式获取的，而不是jquery，如果采用jquery方式代码如下：

jquery

2 创建一个数组存放动态的容器

javascript代码

思路说明：

* 首先获取容器外面的div的dom对象

* 动态创建多个容器，并放到一个数组中

* salvattore方法的append_elements方法，将数组追加到div的最后面。

这里留意一下几个问题：

2.1 hts是一个数组

2.2 hts[i-1] 直接向数组中第一个元素赋值。javascript真是方便，不需要分配数组空间，直接就往数组里面插入数据。爽得很。

2.3 jquery方式创建dom对象

$(html字符串) ，jquery真是好用，如果用原生js创建dom对象就烦死了，但jquery直接写html代码就可以了。

不过，这样得到的对象不是原生dom对象，而是原生dom对象被封装后的jquery对象。

因此改写为：$(html字符串)[0] 以获得原生dom对象。

2.4 ES6的模板字符串

本例中的字符串很有意思，千万注意以下特点：

* 很长的文字是可以换行的，

* 字符串的开头结尾不是用引号(' 或 " ) 而是 ` ，一个小撇，在键盘 1 左侧那个 ~ 按键

* 中间插入变量没用拼接，而是采用${i}

有兴趣的老友可以自己百度一下模板字符串，ES6的特性。

总结

基本，salvattore的用法就是这么简单。

如果想看例子，可以访问 http://www.jiisb.com/tmpspider/index.html