js實現的瀑布流
首先用html和css實現瀑布流的布局：如下圖，為了讓js可以獲得盒子offsetleft等最好讓盒子使用padding分開之間的距離，首先外面得有兩層盒子，內層用來設定大盒子與之間的距離（給pic設定padding），外層用來設定每個大盒子之間的距離（給box設定padding-left和padding-top）。當然這兩層盒子的大小是相同的，為了讓盒子美觀可以給pic設定一些css3的屬性（box-shadow，border等）。 最後讓所有的大盒子（box）都浮動起來，以保證，因為js加上的圖要用到絕對定位所以還需要給容納box的盒子main設定相對定位。瀑布流函式
function wate***ll(main,box)
//建立乙個新的陣列，儲存第一行box的高度
var boxheight=;
for (var i=0;i
2. 下拉事件
用乙個陣列儲存接下來的路徑，在下拉事件裡面首先判斷是否需要載入（當最下面一行圖的一半出來時），需要返回true，不需要返回false。當需要載入時新建立box盒子插入到main裡面並且設定類名，再建立pic盒子插入新建的box盒子裡面，設定類名，再建立img插入到新建的pic盒子裡面，並且給img新增大小，和寬度（所有等寬）最後進行瀑布流函式。
window.οnlοad=function(),,,,,]};
window.οnscrοll=function()
}else if(document.compatmode=="css1compat")
}return
}//檢測螢幕寬度的函式
function client()
}else if(window.compatmode=="css1compat")
}else}}
js原生實現瀑布流
1.確定瀏覽器顯示區域內，一行放多少列盒子 寬度一致，高度由內容撐開 1.1 獲取頁面寬度 1.2 獲取盒子寬度 1.3 顯示的列數 頁面寬度 盒子寬度 2.確定列數之後，先排列第一行 2.1 顯示的列數 頁面寬度 盒子寬度 間隙 2.2for迴圈裡判斷 當i 盒子的索引 小於column 列數 的...
js實現簡單瀑布流效果
1.瀑布流，雖然是一種經典的前端效果，但經常不用都忘了它的寫法。前些天需要時，一直忙著找外掛程式，但外掛程式並不是很友好，免費的達不到效果，花金幣又感覺很不值。有時間還不如自己來，又是自己就隨意寫了乙個，還好能勉強過關。var left top left div div last child off...
瀑布流實現
html 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 js 一定要用window.onload不能用 function var data window.onload function pbl pbl function pbl...