javascript
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
總結
以上是生活随笔為你收集整理的JS瀑布流插件 -- salvattore的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 地日运动模型
- 下一篇： gradle idea java ssm