顧名思義，我們在瀏覽很多**，例如京東**的時候，會發現我們的滑鼠可以無止境的向下拉，一旦拉到網頁的地步就會重新整理出新的東西，這種技術被稱為瀑布流，那麼他到底是如何實現的呢？
話不多收，我們從頭開始敲**，邊寫邊整理思路，共勉~
*
.pubu_head
.pubu_box
.pubu_box
img
"pubu_box">
這裡與之間會有乙個間距，他被稱為解析空格。我，我們可以給img新增乙個樣式display: block；
接下來我們大致需要三個步驟。
1.動態新增。
2.修改的尺寸。
3.滾動的懶載入
請注意，這裡我給新增設定了尺寸200*300；
*
.pubu_head
.pubu_box
.pubu_box img
var pbbox = document.queryselector('.pubu_box');//儲存頁面用的box物件
var count = 0;//已經載入的數量
var length = 16;//需要載入的數量
var imglist = ;
var line = 4;//每一行放四張
效果大概是這樣的，但是，就像做數學題，我寫的只是特例，如果的尺寸不一致怎麼辦？所以我們需要對它進行加工。我們要見他加工成，高度一致等比例的。
//2.調整的尺寸，首先要記錄,調整
function
fomate
() // w/1200 = 300 / h;這是乙個 等比例 的思想
var h = 1000 * 300 / w;
// console.log(h)
for (var j = 0; j < line; j++) }}
此時我們可以將css樣式有關img的尺寸刪除。
我們換位思考，什麼時候瀑布流會得到體現？那就是當使用者滑鼠向下滑動到底部的時候。所以我們要在滾動輪，滑動距離上做文章。
window.onscroll = function
() }
function
add_img
(n)
}
這裡因為篇幅的問題，我沒有將全部**粘過來，而且這個偷懶的瀑布流還有很多缺陷，比如沒有做到響應式等等。希望能幫助到大家，我們共勉 原生ajax瀑布流demo
最近聽朋友們說起瀑布流挺多的，自己就去研究下了，乙個簡單的原生demo，分享給大家.簡單分為三個文件，有詳細的注釋 img ajax.php demo.php 其中img資料夾中放入 1.jpg 2.jpg 3.jpg.ajax.php頁面 模擬從資料庫讀取資料 arr array op opend...
瀑布布局流 原生js
首先html和css 然後單單左浮動是不會 插空 插入的，這裡就是我們的重點啦。首先 都是要絕對定位的。確定好乙個頁面有多少列，每插入一張就計算每一列的高度，取最短的那列插入，計算該插入的top和left再賦值，絕對定位定在那裡，就ok啦 function wate ll parent,pin el...
js瀑布流，簡單封裝
乙個很簡單的瀑布流載入，當滾動條滾動到底部時自動載入，先 敬上 lang en charset utf 8 demotitle head li pinterest wrap pinterest wrap ul pinterest wrap ulli style class pinterest wra...