瀑布流的小例子 和ThinkPHP相結合

       其實瀑布流就是用了固定的寬度或者高度産生一堆不規則的div來展現出來的。

   流程是

1：初始化頁面的時候加載一次資料

2.當頁面到底部的時候再次加載資料

3，重複以上操作直到沒有資料

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

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

<code>&lt;!DOCTYPE HTML&gt;</code>

<code> </code><code>&lt;</code><code>html</code><code>&gt;</code>

<code> </code><code>&lt;</code><code>head</code><code>&gt;</code>

<code> </code><code>&lt;</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"Content-Type"</code> <code>content</code><code>=</code><code>"text/html; charset=UTF-8"</code><code>&gt;</code>

<code> </code><code>&lt;</code><code>title</code><code>&gt;Insert title here&lt;/</code><code>title</code><code>&gt;</code>

<code> </code><code>&lt;!--樣式--&gt;</code>

<code> </code><code>&lt;</code><code>style</code> <code>type</code><code>=</code><code>"text/css"</code><code>&gt;</code>

<code>body {margin:40px auto; width:800px; font-size:12px; color:#666;}</code>

<code> </code><code>.item{</code>

<code>    </code><code>border: 1px solid #D4D4D4;</code>

<code>    </code><code>color: red;</code>

<code>    </code><code>margin: 0 10px 10px 0;</code>

<code>    </code><code>padding: 10px;</code>

<code>    </code><code>position: relative;</code>

<code>    </code><code>width: 200px;</code>

<code> </code><code>}</code>

<code> </code><code>.loading-wrap{</code>

<code>    </code><code>bottom: 50px;</code>

<code>    </code><code>width: 100%;</code>

<code>    </code><code>height: 52px;</code>

<code>    </code><code>text-align: center;</code>

<code>    </code><code>display: none;</code>

<code> </code><code>.loading {</code>

<code>    </code><code>padding: 10px 10px 10px 52px;</code>

<code>    </code><code>height: 32px;</code>

<code>    </code><code>line-height: 28px;</code>

<code>    </code><code>color: #FFF;</code>

<code>    </code><code>font-size: 20px;</code>

<code>    </code><code>border-radius: 5px;</code>

<code>    </code><code>background: 10px center rgba(0,0,0,.7);</code>

<code> </code><code>.footer{</code>

<code>    </code><code>border: 2px solid #D4D4D4;</code>

<code> </code><code>&lt;/</code><code>style</code><code>&gt;</code>

<code> </code><code>&lt;/</code><code>head</code><code>&gt;</code>

<code> </code><code>&lt;</code><code>body</code><code>&gt;</code>

<code> </code><code>&lt;!--引入所需要的jquery和插件--&gt;</code>

<code> </code><code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"/test/public/Js/jquery-1.7.2.min.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code> </code><code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"/test/public/Js/jquery.masonry.min.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code> </code><code>&lt;!--瀑布流--&gt;</code>

<code> </code><code>&lt;</code><code>div</code> <code>id</code><code>=</code><code>"container"</code> <code>class</code><code>=</code><code>" container"</code><code>&gt;</code>

<code> </code><code>&lt;!--這裡通過設定每個div不同的高度，來凸顯布局的效果--&gt;</code>

<code> </code><code>&lt;</code><code>volist</code> <code>name</code><code>=</code><code>"height"</code> <code>id</code><code>=</code><code>"vo"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"item"</code> <code>style</code><code>=</code><code>"height:{$vo}px;"</code><code>&gt;瀑布流下來了&lt;/</code><code>div</code><code>&gt;</code>

<code> </code><code>&lt;/</code><code>volist</code><code>&gt;</code>

<code> </code><code>&lt;/</code><code>div</code><code>&gt;</code>

<code> </code><code>&lt;!--加載中--&gt;</code>

<code> </code><code>&lt;</code><code>div</code> <code>id</code><code>=</code><code>"loading"</code> <code>class</code><code>=</code><code>"loading-wrap"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>span</code> <code>class</code><code>=</code><code>"loading"</code><code>&gt;加載中，請稍後...&lt;/</code><code>span</code><code>&gt;</code>

<code> </code><code>&lt;!--尾部--&gt;</code>

<code> </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"footer"</code><code>&gt;&lt;</code><code>center</code><code>&gt;我是頁腳&lt;/</code><code>center</code><code>&gt;&lt;/</code><code>div</code><code>&gt;</code>

<code> </code><code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;</code>

<code>$(function(){</code>

<code>    </code><code>//頁面初始化時執行瀑布流</code>

<code>    </code><code>var $container = $('#container');</code>

<code>     </code><code>$container.masonry({</code>

<code>        </code><code>itemSelector : '.item',</code>

<code>        </code><code>isAnimated: true</code>

<code>     </code><code>});</code>

<code>     </code><code>//使用者拖動滾動條，達到底部時ajax加載一次資料</code>

<code>    </code><code>var loading = $("#loading").data("on", false);//通過給loading這個div增加屬性on，來判斷執行一次ajax請求</code>

<code>    </code><code>$(window).scroll(function(){</code>

<code>        </code><code>if(loading.data("on")) return;</code>

<code>        </code><code>if($(document).scrollTop() &gt; $(document).height()-$(window).height()-$('.footer').height()){//頁面拖到底部了</code>

<code>            </code><code>//加載更多資料</code>

<code>            </code><code>loading.data("on", true).fadeIn();         //在這裡将on設為true來阻止繼續的ajax請求</code>

<code>            </code><code>$.get(</code>

<code>                </code><code>"getMore",</code>

<code>                </code><code>function(data){</code>

<code>                   </code><code>//擷取到了資料data,後面用JS将資料新增到頁面上</code>

<code>                    </code><code>var html = "";</code>

<code>                    </code><code>if($.isArray(data)){</code>

<code>                        </code><code>for(i in data){</code>

<code>                            </code><code>html += "&lt;</code><code>div</code> <code>class=\"item\" style=\"height:"+data[i]+"px;\"&gt;瀑布又流下來了&lt;/</code><code>div</code><code>&gt;";</code>

<code>                        </code><code>}</code>

<code>                        </code><code>var $newElems = $(html).css({ opacity: 0 }).appendTo($container);</code>

<code>                        </code><code>$newElems.imagesLoaded(function(){</code>

<code>                            </code><code>$newElems.animate({ opacity: 1 });</code>

<code>                            </code><code>$container.masonry( 'appended', $newElems, true );</code>

<code>                              </code><code>});</code>

<code>                      </code><code>//一次請求完成，将on設為false，可以進行下一次的請求</code>

<code>                        </code><code>loading.data("on", false);</code>

<code>                    </code><code>}</code>

<code>                    </code><code>loading.fadeOut();</code>

<code>                </code><code>},</code>

<code>                </code><code>"json"</code>

<code>            </code><code>);</code>

<code>        </code><code>}</code>

<code>    </code><code>});</code>

<code> </code><code>});</code>

<code> </code><code>&lt;/</code><code>script</code><code>&gt;</code>

<code> </code><code>&lt;/</code><code>body</code><code>&gt;</code>

<code> </code><code>&lt;/</code><code>html</code><code>&gt;</code>

在Action裡添加

<code>class</code> <code>UserAction </code><code>extends</code> <code>Action{</code>

<code> </code><code>//初始化的資料</code>

<code>        </code><code>public</code> <code>function</code> <code>index(){</code>

<code>        </code><code>for</code> <code>(</code><code>$i</code><code>=0;</code><code>$i</code><code>&lt;10;</code><code>$i</code><code>++){</code>

<code>            </code><code>$res</code><code>[</code><code>$i</code><code>] = rand(100, 400);</code>

<code>        </code><code>$this</code><code>-&gt;assign(</code><code>'height'</code><code>, </code><code>$res</code><code>);</code>

<code>        </code><code>$this</code><code>-&gt;display();</code>

<code>                                                                </code> 

<code>    </code><code>}</code>

<code> </code><code>//擷取一次請求的資料</code>

<code>        </code><code>public</code> <code>function</code> <code>getMore(){</code>

<code>        </code><code>for</code> <code>(</code><code>$i</code><code>=0;</code><code>$i</code><code>&lt;6;</code><code>$i</code><code>++){</code>

<code>        </code><code>$this</code><code>-&gt;ajaxReturn(</code><code>$res</code><code>);</code>

通過判斷視窗是否滾動到頁面底部來決定用ajax加載一次資料。如果不做處理，會一下子請求很多次。是以，要使用條件來限制。

我使用的是往一個元素上指派 $("#loading").data("on", true);，在請求期間判斷是true則不繼續請求，然後在頁面請求完成後再指派為false

在真實的例子中，Action裡初始化資料的時候，要從資料庫調用一次資料。

而在getMore中也要在到底部的時候加載一次資料，是以一定得保證這兩次不要将從資料庫請求的資料重複了。或者可以做判斷來完成.~要不然就會造成加載重複資料的結果。

本文轉自 3147972 51CTO部落格，原文連結：http://blog.51cto.com/a3147972/1213873，如需轉載請自行聯系原作者