jQuery實現瀑布流的取巧做法分享

 這篇文章主要介紹了jQuery實現瀑布流的取巧做法分享,需要的朋友可以參考下

   

分析：瀑布流，做法有2種

（1）絕對定位方案：每個單元格設置為絕對定位，通過計算，分別設置 top , left 即可實現

（2）浮動方案：弄N列布局（浮動），然後圖片數據，按順序依次插入，如N為3列 ，第一張圖片插入到第一列，第二張圖片插入到第二列，第三張圖片插入到第三列，第四張圖片插入到第一列........這樣循環插入（不能自適應）

CSS與HTML代碼：

 

復制代碼 代碼如下:
body,ul,li{margin:0;margin:0;}
ul{list-style:none;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both; height:0;}.clearfix{*zoom:1}
/*瀑布流*/
.wallList{width:860px;}
.wallList li{float:left;display:inline;margin-right:16px;}
.wallList li a{background:#eee;border:1px solid #ccc;padding:5px 5px 0 5px;display:block;margin-bottom:10px;}
.wallList li a:hover{border-color:#f60;}
.wallList li .name{display:block;text-align:center;padding:8px 0;}
.loadTips{text-align:center;padding:15px 0;}

 

 

復制代碼 代碼如下:
<div class="wallList" id="wallList">
<ul class="clearfix">
<li></li>
<li></li>
<li></li>
</ul>
<p class="loadTips" id="loadTips"><span>正在加載......</span></p>
</div>

 

使用jQuery實現，大概思路如下：

　　（1）獲取N列中 最小的高度值，JS提供的API是Math.min()，但這個API最多只能傳入 2 個參數，所以就需要用aplly來擴展，Math.min.apply(null,[xxx,xxx,xxxx,xxxx])
（2）給 window 綁定 scroll事件，下拉的時候獲取 $(document).scrollTop() ， 當 $(document).scrollTop() 大於 最小的高度值，就ajax請求url，如果有數據，就往頁面插入HTML結構，沒有則提示 “加載完”，然後window解綁此事件

 

復制代碼 代碼如下:
// 數據格式
var testJson = {
"status":1,
"data":[
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x300/B5E61D/fff","width":240,"height":300,"name":"圖片1"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/333/fff","width":240,"height":210,"name":"圖片2"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x190/f60/fff","width":240,"height":190,"name":"圖片3"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x230/B5E61D/fff","width":240,"height":230,"name":"圖片4"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x280/B5E61D/fff","width":240,"height":280,"name":"圖片5"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x260/eee/fff","width":240,"height":260,"name":"圖片6"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x180/000/fff","width":240,"height":180,"name":"圖片7"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x240/B5E61D/fff","width":240,"height":240,"name":"圖片8"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x265/B5E61D/fff","width":240,"height":265,"name":"圖片9"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x245/259/fff","width":240,"height":245,"name":"圖片10"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x310/B5E61D/fff","width":240,"height":310,"name":"圖片11"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/B5E61D/fff","width":240,"height":210,"name":"圖片12"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x150/B5E61D/fff","width":240,"height":150,"name":"圖片13"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x165/B5E61D/fff","width":240,"height":165,"name":"圖片14"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x100/B5E61D/fff","width":240,"height":100,"name":"圖片15"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x280/B5E61D/fff","width":240,"height":280,"name":"圖片16"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x225/B5E61D/fff","width":240,"height":225,"name":"圖片17"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/B5E61D/fff","width":240,"height":210,"name":"圖片18"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x230/B5E61D/fff","width":240,"height":230,"name":"圖片19"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/B5E61D/fff","width":240,"height":210,"name":"圖片20"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x300/B5E61D/fff","width":240,"height":300,"name":"圖片21"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/333/fff","width":240,"height":210,"name":"圖片22"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x190/f60/fff","width":240,"height":190,"name":"圖片23"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x230/B5E61D/fff","width":240,"height":230,"name":"圖片24"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x280/B5E61D/fff","width":240,"height":280,"name":"圖片25"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/eee/fff","width":240,"height":210,"name":"圖片26"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x180/000/fff","width":240,"height":180,"name":"圖片27"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x240/B5E61D/fff","width":240,"height":240,"name":"圖片28"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x195/B5E61D/fff","width":240,"height":195,"name":"圖片29"},
{"href":"http:xxxxxxx&qu