這個資料夾放了需要的**，名字都按照0，1,2，3…排列，便於取的時候好取，我放了23張，當然實際應用肯定是ajax請求來的
最外層#main這個容器就是放整個瀑布流的盒子，裡面.pin是每個商品詳情盒子，.box是每張商品的盒子，裡面放上商品
$( window ).on( "load", function(),,,]}; // 實際開發中這個資料從後台獲取
window.onscroll=function());
wate***ll(); // 滾動載入的時候要執行這個函式，否則後面動態渲染的商品都沒有樣式};}
});/*
parent 父級id
pin 元素id
*/function wate***ll(parent,pin));
var pinharr=;//用於儲存 每列中的所有塊框相加的高度。
$apin.each( function( index, value )else);
//陣列 最小高元素的高 + 新增上的apin[i]塊框高
pinharr[ minhindex ] += $apin.eq( index ).height() + 15;//更新新增了塊框後的列高
}});
}function checkscrollside()
實現瀑布流布局
瀑布流，又稱瀑布流式布局。是比較流行的一種 頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷載入資料塊並附加至當前尾部，瀑布流的主要特性便是錯落有致，定寬而不定高的設計讓頁面區別於傳統的矩陣式布局模式。主體思路是記錄每一列的高度，父容器相對定位，成員絕對定位，利用to...
JavaScript實現瀑布流布局
在一些購物類 上會看到一種諸如下圖的類似瀑布流布局，這種布局的乙個特點是每乙個盒子的寬度相同，而高度卻是任意的。div 通過乙個div.pic box盒子來控制每個元素之間的間隔，div.pic來給元素新增邊框效果。由於後面div.pic box需要絕對定位，所以給它的父元素乙個position r...
js實現瀑布流布局
1.瀑布流的布局，要求布局的元素是等寬的，瀑布流布局的特點就是等寬不等高，然後計算元素的寬度和瀏覽器螢幕寬度的比值，確定出列數 2.建立乙個陣列，這個陣列用於儲存第一行的各個高度 3.計算出這個陣列中最小的元素，接下來的通過定位的方式布局到高度最小的下面，4.最後將這個最小高度進行更新，然後一直迴圈...