瀑布流的小例子 和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，如需转载请自行联系原作者