基于JavaScript實現瀑布流布局(二)_javascript技巧

1.建立Html模版

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

2.通過css簡單設置樣式

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

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

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

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

4.JS實現靜態瀑布流

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

代碼:

5.js實現動態加載

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

希望本文所述對大家學習javascript程序設計有所幫助。

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