實現這個效果需要兩個jquery外掛程式infinite-scroll和masonry。
infinite-scroll-jquery
引數詳解：?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$('#content').infinitescroll(,//當出錯的時候，比如404頁面的時候執行的函式
localmode :true//是否允許載入具有相同函式的頁面，預設為false
},function(arrayofnewelems));
取消繫結事件的函式寫法：$(window).unbind(『.infscr』); 通過事件觸發載入資料的寫法：
$(document).trigger(『retrieve.infscr』); //比如加到某個click事件中
此外掛程式還有乙個鮮為人知的功能就是可以載入任何頁面的選擇器中的內容，可以是id以及是class，並轉化到html儲存。要比jquery自帶的的load強大多了。
masonry
引數詳解：?
1
2
3
4
5
6
7
8
9
10
11
$(function() },
gutterwidth:0,//列的間隙
isfitwidth:true,//自適應寬度
isresizablel:true,// 是否可調整大小
isrtl:false,//使用從右到左的布局 });
});
雙劍合璧?本部落格部分演示**：
? 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<divclass="img_div">
<divid="container">
<divclass="item">
<imgsrc="/phpwork/myblog/res/userimage/"alt="">
<divid="more">
<ahref="/phpwork/myblog/index.php/image/image/p/2">
接下來是js檔案：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
$(function());
});
$('#container').masonry();
$('.item').mouseover(function()).mouseout(function());
}
item_callback();
varsp = 1
varcount = $("#count").val();
$("#container").infinitescroll(
}
},errorcallback:function()
},function(newelements));
});
實現瀑布流布局
瀑布流，又稱瀑布流式布局。是比較流行的一種 頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷載入資料塊並附加至當前尾部，瀑布流的主要特性便是錯落有致，定寬而不定高的設計讓頁面區別於傳統的矩陣式布局模式。主體思路是記錄每一列的高度，父容器相對定位，成員絕對定位，利用to...
JavaScript實現瀑布流布局
在一些購物類 上會看到一種諸如下圖的類似瀑布流布局，這種布局的乙個特點是每乙個盒子的寬度相同，而高度卻是任意的。div 通過乙個div.pic box盒子來控制每個元素之間的間隔，div.pic來給元素新增邊框效果。由於後面div.pic box需要絕對定位，所以給它的父元素乙個position r...
js實現瀑布流布局
1.瀑布流的布局，要求布局的元素是等寬的，瀑布流布局的特點就是等寬不等高，然後計算元素的寬度和瀏覽器螢幕寬度的比值，確定出列數 2.建立乙個陣列，這個陣列用於儲存第一行的各個高度 3.計算出這個陣列中最小的元素，接下來的通過定位的方式布局到高度最小的下面，4.最後將這個最小高度進行更新，然後一直迴圈...