ThinkPHP implements Waterfall Stream

Many people want to do the effect of Waterfall Stream. here we will tell you how to use it on the official website. first, download the jquery. masonry. min. js plug-in of Waterfall Stream. the URL is http://masonry.desandro.com/index.html.

Many people want to do the effect of Waterfall Stream. here we will tell you how to use it on the official website. first, download the jquery. masonry. min. js plug-in of Waterfall Stream. the URL is http://masonry.desandro.com/index.html.

Process:

1. During page initialization, the plug-in is called for a layout;

2. when you drag the scroll bar to the bottom, load the data once with ajax and display it in typographical form.

3. Repeat 2 until no data exists.

Html code:

1.  
3.  
5. Insert title here 
6.  
8. Body {margin: 40px auto; width: 800px; font-size: 12px; color: #666 ;}
9. . Item {
10. Border: 1px solid # D4D4D4;
11. Color: red;
12. Margin: 0 10px 10px 0;
13. Padding: 10px;
14. Position: relative;
15. Width: 200px;
16. }
17. . Loading-wrap {
18. Bottom: 50px;
19. Width: 100%;
20. Height: 52px;
21. Text-align: center;
22. Display: none;
23. }
24. . Loading {
25. Padding: 10px 10px 10px 52px;
26. Height: 32px;
27. Line-height: 28px;
28. Color: # FFF;
29. Font-size: 20px;
30. Border-radius: 5px;
31. Background: 10px center rgba (0, 0,. 7 );
32. }
33. . Footer {
34. Border: 2px solid # D4D4D4;
35. }
36.  
37.  
38.  
39.  
40.  
43.  
44.  
46.  
48. Waterfall flow down 
49.  
50.  
51.  
52.  
53.  
55. Loading... please wait... 
56.  
57.  
58.  
59. I am the footer  
60.  
62. // Used to convert the unix timestamp
63. Function unix_to_datetime (unix)
64. {
65. Var now = new Date (parseInt (unix) * 1000 );
66. Return now. toLocaleString (). replace (/year | month/g, "-"). replace (/day/g ,"");
67. }
68. $ (Function (){
69. // Execute the waterfall stream during page initialization
70. Var $ container = $ ('# INER ');
71. $ Container. masonry ({
72. ItemSelector: '. item ',
73. IsAnimated: true
74. });
75. // You can drag the scroll bar to load data once ajax reaches the bottom.
76. Var loading = $ ("# loading"). data ("on", false); // you can add an attribute on to the loading div to determine whether to execute an ajax request.
77. $ (Window). scroll (function (){
78. If (loading. data ("on") return;
79. If ($ (document ). scrollTop ()> $ (document ). height ()-$ (window ). height ()-$ ('. footer '). height () {// drag the page to the bottom
80. // Load more data
81. Loading. data ("on", true). fadeIn (); // here, set on to true to block subsequent ajax requests
82.  
83. // Obtain The Last id
84. Var lastid = $ ('. last_id: last'). val ();
85. $. Get (
86. "GetMore", // page to jump
87. {Lastid: lastid}, // pass the value
88. Function (data ){
89. // Get the data, and add the data to the page using JS later
90. Var getdata = data. data;
91. Var html = "";
92. If ($. isArray (getdata )){
93. $. Each (data. data, function (I, item ){
94. Html + =" The waterfall flow down again";
95. });
96. Var $ newElems = emerge (html).css ({opacity: 0}). appendTo ($ container );
97. $ NewElems. imagesLoaded (function (){
98. $ NewElems. animate ({opacity: 1 });
99. $ Container. masonry ('append', $ newElems, true );
100. });
101. // Once the request is completed, set on to false. you can perform the next request.
102. Loading. data ("on", false );
103. }
104. Loading. fadeOut ();
105. },
106. "Json"
107. );
108. }
109. });
110. });
111.  
112.  
113.  

Action code

1. // Initialize the data
2. Public function lists (){
3. $ Data = D ('info')-> order ('Id desc')-> limit (10)-> select ();
4. $ This-> assign ('data', $ data );
5. $ This-> display ();
6. }
7. // Obtain the data of a request
8. Public function getMore (){
9. // Obtain The Last id
10. If (! Emptyempty ($ _ GET ['lastid']) $ map ['id'] = array ('Lt ', $ _ GET ['lastid']);
11. $ Data = D ('info')-> where ($ map)-> order ('Id desc')-> limit (10)-> select ();
12. $ This-> ajaxReturn ($ data );
13. }

Note:You can determine whether the window is scrolled to the bottom of the page to load the data once using ajax. if you do not process the data, the request will be made many times at once. Therefore, you must use conditions to limit it.

I used to assign a value to an element $ ("# loading "). data ("on", true); during the request, if the value is true, the request is not continued, and the value is false after the page request is complete.