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 -1 of 4  {

     width :  25% ;

}

.size -1 of 3  {

     width :  33.333% ;

}

.size -1 of 2  {

     width :  50% ;

}

 

 

#fh 5 co-board[data-columns]::before {

     content :  '4 .column.size-1of4' ;

     display :  none ;

}

 

/* Configurate salvattore with media queries */

@media  screen  and ( max-width :  300px ) {

     #fh 5 co-board[data-columns]::before {

         content :  '1 .column' ; 

     }

}

 

@media  screen  and ( min-width :  301px ) and ( max-width :  700px ) {

     #fh 5 co-board[data-columns]::before {

         content :  '2 .column.size-1of2' ;

     }

}

 

@media  screen  and ( min-width :  701px ) and ( max-width :  850px ) {

     #fh 5 co-board[data-columns]::before {

         content :  '3 .column.size-1of3' ;

     }

}

 

@media  screen  and ( min-width :  851px ) {

     #fh 5 co-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的样式就是这样的。

#fh 5 co-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 ) {

     #fh 5 co-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