1.建立Html模版

想法是先用一個div container承載所有內(nèi)容,然后div box用來放置圖片,最后div box_border來當(dāng)圖片框,代碼如下

2.通過css簡單設(shè)置樣式

主要設(shè)置水平放置,相框顏色,邊界之類的

/*
邊界不留空,背景黑灰
*/
body{
 margin: 0px;
 background: darkgray;
}
/*
總布局設(shè)置為相對布局
*/
.container{
 position: relative;
}
/*
設(shè)置box屬性
*/
.box{
 padding: 5px;
 float: left;
}
/*設(shè)置圖片邊框陰影和圓角
*/
.box_border{
 padding: 5px;
 border: 1px solid #cccccc;
 box-shadow: 0px 0px 5px #ccc;
 border-radius: 5px;
}
/*設(shè)置圖片格式*/
.box_border img{
 width: 150px;
 height: auto;
}

3.JS控制每一行所擺放的圖片個數(shù)

上面的css布局之后,瀏覽器窗口大小改變,里面的圖片數(shù)量也會改變,現(xiàn)在要用JS固定住每一行的圖片數(shù)量,對于不同尺寸的屏幕都能做到很好的效果

4.JS實現(xiàn)靜態(tài)瀑布流

先實現(xiàn)靜態(tài)的布局,也就是瀏覽器下拉不會自動刷新出新的圖片.
實現(xiàn)排列算法很簡單

代碼:

5.js實現(xiàn)動態(tài)加載

動態(tài)加載也就是滾動條永遠滑不到底部,要解決動態(tài)加載我們需要考慮兩個問題:
1）.什么時候加載?
滑動距離+瀏覽器高度>最后一張圖片距離頂部的距離
2）.怎樣加載?
通過創(chuàng)建新的節(jié)點,把創(chuàng)建的節(jié)點添加進去即可
最終代碼:

希望本文所述對大家學(xué)習(xí)javascript程序設(shè)計有所幫助。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com