JS瀑布流插件 -- salvattore
说两句
今天是腊八，腊月初八。老辈子腊八这天会把家里的粮食柜子翻出来，把各种谷物豆类都凑到一起熬粥，其实也不一定是8种，总是自己喜欢什么口味就放什么东西，样数不厌其繁，多多益善，在文火上直熬3个小时才喝，非常的好喝。
以前这一天是生意人一年封账的时候，把账目算清楚，债主会通知欠债人还钱。做生意欠账不丢人，账期是由来已久的，中国三角债问题是文化，并不是坏事，其实在以前是基于人文信用体系行程的惯例。时至今日，旧的信用体系破坏了，新的体系还没建立起来，欠债就有点儿不好的意思了。其实也很正常，我的老东家现在还欠我工资没给我呢，大家还是朋友，谁都有个手长手短的时候，互相周济，莫用钱作为衡量一个人的唯一标准，那样你自己也就不纯粹了。
这一天还是释迦摩尼成道的一天，佛教进入华夏后，与民俗各种搅合，让人感觉佛很亲民。
书归正传
昨儿在《模板爬虫 - 网页原型设计》这篇文中，将爬到的模板以瀑布流的方式展示出来了。
其中采用了瀑布流插件 -- salvattore [音标：赛欧维特] ，这里给大家简单解释一下用法。
设计思想
在H5的布局中，只有流式布局，要么是块元素的独占一行，如下图：
或者是浮动的，向右排列：
而 savlattore实现的瀑布流是下面的样子。
看出区别没？容器1和容器4之间是直接排列下去的，而不因为容器3的高度，中间就会有很大的缝隙。
如果没理解，请认真看看上面三个图的区别。
那么salvattore是如何实现的呢？请看下图：
发现奥秘没？salvattore其实是动态生成了若干个div，然后将页面元素塞入其中，就实现了瀑布流了。
用法
现在介绍一下怎么使用。
1 页面引入salvattore.js
推荐采用bootcdn作为源。
|
1
|
<script src="https://cdn.bootcss.com/salvattore/1.0.9/salvattore.min.js"></script>
|
2 将你的所有的容器都放入一个div中，这个div增加一个属性 data-columns
<div id="fh5co-board" data-columns>
<div class="item">
<div class="animate-box">
<a href="#" class="image-popup fh5co-board-img">
<img src="http://demo.cssmoban.com/cssthemes3/ft5_11_hydrogen/images/img_1.jpg" alt="Free HTML5 Bootstrap template"></a>
</div>
<div class="fh5co-desc">一个魔幻效果的摄影网站模板<br>凡科建站 [科技]</div>
</div>
<div class="item">
<div class="animate-box">
<a href="#" class="image-popup fh5co-board-img">
<img src="http://demo.cssmoban.com/cssthemes3/ft5_11_hydrogen/images/img_2.jpg" alt="Free HTML5 Bootstrap template"></a>
</div>
<div class="fh5co-desc">一个魔幻效果的摄影网站模板<br>凡科建站 [科技]</div>
</div>
<div class="item">
<div class="animate-box">
<a href="#" class="image-popup fh5co-board-img">
<img src="http://demo.cssmoban.com/cssthemes3/ft5_11_hydrogen/images/img_6.jpg" alt="Free HTML5 Bootstrap template"></a>
</div>
<div class="fh5co-desc">一个魔幻效果的摄影网站模板<br>凡科建站 [科技]</div>
</div>
<div class="item">
<div class="animate-box">
<a href="#" class="image-popup fh5co-board-img">
<img src="http://demo.cssmoban.com/cssthemes3/ft5_11_hydrogen/images/img_3.jpg" alt="Free HTML5 Bootstrap template"></a>
</div>
<div class="fh5co-desc">一个魔幻效果的摄影网站模板<br>凡科建站 [科技]</div>
</div>
<div class="item">
<div class="animate-box">
<a href="#" class="image-popup fh5co-board-img">
<img src="http://demo.cssmoban.com/cssthemes3/ft5_11_hydrogen/images/img_4.jpg" alt="Free HTML5 Bootstrap template"></a>
</div>
<div class="fh5co-desc">一个魔幻效果的摄影网站模板<br>凡科建站 [科技]</div>
</div>
<div class="item">
<div class="animate-box">
<a href="#" class="image-popup fh5co-board-img">
<img src="http://demo.cssmoban.com/cssthemes3/ft5_11_hydrogen/images/img_5.jpg" alt="Free HTML5 Bootstrap template"></a>
</div>
<div class="fh5co-desc">一个魔幻效果的摄影网站模板<br>凡科建站 [科技]</div>
</div>
<div class="item">
<div class="animate-box">
<a href="#" class="image-popup fh5co-board-img">
<img src="http://demo.cssmoban.com/cssthemes3/ft5_11_hydrogen/images/img_7.jpg" alt="Free HTML5 Bootstrap template"></a>
</div>
<div class="fh5co-desc">一个魔幻效果的摄影网站模板<br>凡科建站 [科技]</div>
</div>
<div class="item">
<div class="animate-box">
<a href="#" class="image-popup fh5co-board-img">
<img src="http://demo.cssmoban.com/cssthemes3/ft5_11_hydrogen/images/img_8.jpg" alt="Free HTML5 Bootstrap template"></a>
</div>
<div class="fh5co-desc">一个魔幻效果的摄影网站模板<br>凡科建站 [科技]</div>
</div>
</div>
这样就可以用了，salvattore的引入和初始化非常简单。
3 自定义一个salvattore的css样式
/* Base styles */
.column {
float: left;
}
@media screen and (max-width: 300px) {
.column {
float: none;
position: relative;
clear: both;
}
}
.size-1of4 {
width: 25%;
}
.size-1of3 {
width: 33.333%;
}
.size-1of2 {
width: 50%;
}
#fh5co-board[data-columns]::before {
content: '4 .column.size-1of4';
display: none;
}
/* Configurate salvattore with media queries */
@media screen and (max-width: 300px) {
#fh5co-board[data-columns]::before {
content: '1 .column';
}
}
@media screen and (min-width: 301px) and (max-width: 700px) {
#fh5co-board[data-columns]::before {
content: '2 .column.size-1of2';
}
}
@media screen and (min-width: 701px) and (max-width: 850px) {
#fh5co-board[data-columns]::before {
content: '3 .column.size-1of3';
}
}
@media screen and (min-width: 851px) {
#fh5co-board[data-columns]::before {
content: '4 .column.size-1of4';
}
}
上面的css解释一下：
1 目的是在不同大小的浏览器上展示不同列数的瀑布流
PC机上，展示4列，平板上3列，一般手机上2列，如果你的手机太小了，就1列了。
@media screen and (max-width: 300px) {
.column {
float: none;
position: relative;
clear: both;
}
}
这一句是说，如果浏览器宽度小于300px的话，.column的样式就是这样的。
#fh5co-board[data-columns]::before {
content: '4 .column.size-1of4';
display: none;
}
这是干嘛呢？原来，salvattore在创建多个列的手法是这样的，它动态在要瀑布流显示的多个容器的前面增加一个文本元素，这个元素的内容会决定要创建几列瀑布流。这句话的意思是，id为fh5co-board(#fh5co-board)，且有属性名为 data-columns( [data-columns] )的标签将在其前面(::before)增加一个文本元素，元素的内容(content)是'4 .column.size-1of4'的文字，但这行文字是隐藏不可见(display:none)的。
这里面写的 4 .column.size-1of4 的格式内容，是固定的，salvattore看到这样的文字就知道该处理成4列。
@media screen and (min-width: 701px) and (max-width: 850px) {
#fh5co-board[data-columns]::before {
content: '3 .column.size-1of3';
}
}
这句的 意思是在701px到850px宽度的浏览器上，瀑布流就处理成3列了。
动态添加容器
另外，如何动态的添加容器呢？
代码如下：
var conter=document.querySelector('#fh5co-board');
var hts=[];
for(var i=1;i<=29;i++){
hts[i-1]=$(`<div class="item bounceIn animated"> <div class="animate-box"><a href="#" class="image-popup fh5co-board-img" title="Lorem">
<img src="http://demo.cssmoban.com/cssthemes3/ft5_11_hydrogen/images/img_`+i+`.jpg" alt="Free HTML5 Bootstrap template"></a>
</div><div class="fh5co-desc">一个魔幻效果的摄影网站模板<br>凡科建站 [科技]</div> </div>`)[0];
}
salvattore['append_elements'](conter, hts);
1 采用原生js获得包含所有容器的div对象。上例：
var conter=document.querySelector('#fh5co-board');
这里一定要注意，是采用原生方式获取的，而不是jquery，如果采用jquery方式代码如下：
var conter=$('#fh5co-board')[0];
2 创建一个数组存放动态的容器
var hts=[];
for(var i=1;i<=29;i++){
hts[i-1]=$(`<div class="item bounceIn animated">
<div class="animate-box">
<a href="#" class="image-popup fh5co-board-img" title="Lorem">
<img src="http://demo.cssmoban.com/cssthemes3/ft5_11_hydrogen/images/img_${i}.jpg"
alt="Free HTML5 Bootstrap template"></a>
</div><div class="fh5co-desc">一个魔幻效果的摄影网站模板<br>凡科建站
[科技]</div> </div>`)[0];
}
salvattore.append_elements(conter, hts);
思路：
* 首先获取容器外面的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