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
#學習筆記#(28)+JS瀑布流-滾動條下拉載入圖片
waterfall.html <html> <head> <title>瀑布流佈局</title> <meta charset="gb2312"/> <link type="text/css"
關於瀑布流的佈局原理分析（純CSS瀑布流與JS瀑布流）
瀑布流 又稱瀑布流式佈局，是比較流行的一種網站頁面佈局方式。即多行等寬元素排列，後面的元素依次新增到其後，等寬不等高，根據圖片原比例縮放直至寬度達到我們的要求，依次按照規則放入指定位置。 為什麼使用瀑布流 瀑布流佈局在我們現在的前端頁面中經常會用的到，它可以有效的降低頁面的複雜度，節
js實現瀑布流
done title pos webkit for ria side 可能 src 下午查找了瀑布流的相關原理，找了一些css3實現的還有js實現的，最後總結了一些比較簡單的，易懂的整理起來 1.css3實現 只要運用到 column-count分列
原生js實現的瀑布流布局
n) top 開始 rrh lang java ansi return 一個 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">
利用JS實現簡單的瀑布流效果
color position func 如何實現 利用 無限 bar 拓展 復制代碼 一.瀑布流之準備工作 首先聲明下, 為了方便演示和聯系, 我使用的是本地圖片, 如果大家有需要的話可以嘗試著寫下網絡的, 不過本地和遠端的大致是相同的. 那麽我就來簡單介紹下本地
js之瀑布流的實現
cti 新的 info orm charset 遍歷 appdata cli ref <!DOCTYPE html> <html lang="en"> <head> <meta charset="U
原生JS實現瀑布流布局
jpg 相對布局 復制 圖像 == borde 一行 原生 per 一.瀑布流之準備工作 首先聲明下, 為了方便演示和聯系, 我使用的是本地圖片, 如果大家有需要的話可以嘗試著寫下網絡的, 不過本地和遠端的大致是相同的. 那麽我就來簡單介紹下本地的瀑布流效果吧,
原生js實現瀑布流效果 函式封裝
實現目標：實現瀑布流佈局、當滾動條滾動到一定距離時載入圖片 瀑布流佈局：結合視窗改變 定位第一行的盒子 第二行第一個盒子接到第一行最矮的盒子下面 當接完後更新最矮盒子 以此類推 滾動載入圖片：案例是用陣列物件實現圖片載入 條件是當載入到最後一張圖片一半+最後盒子的offsetTop小於等於螢
js實現瀑布流布局
text att else oda rom 流布局 數據 his type window.onload = function () { var d1 = new Waterfall(); d1.init();};//構造函數function Waterfall(
JS原生瀑布流
JS原生瀑布流（適合學習案例） 瀑布流：通俗講就是滑鼠下滑時，圖片或者其他塊像瀑布一樣源源不斷的顯現。 html程式碼結構 <div id="fall"> <ul></ul> <ul>&
js隨機圖片瀑布流
app func line script lis rand fun left lin <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti
js簡單瀑布流實現
什麼是瀑布流 瀑布流其實就是一種佈局方式，比如說有很多模組，這些模組大小不一，怎樣才能把這些模組相對漂亮的排列到一起？瀑布流就可以很好地解決這個問題。首先把這些模組的寬（高）都設定一樣，然後讓他們像瀑布一樣從上到下依次排列。如果還不清楚的話，強烈建議大家去看一