Combining small examples of waterfall stream with ThinkPHP

Jquery. masonry. min. js plug-in of waterfall stream address: plugin

In fact, waterfall streams are displayed with a fixed width or height to generate a pile of irregular div.

The process is

1: load data once during page Initialization

2. load data again at the bottom of the page

3. Repeat the preceding operations until no data exists.

<! Doctype html> 
Add in Action
Class UserAction extends Action {// initialized data public function index () {for ($ I = 0; $ I <10; $ I ++) {$ res [$ I] = rand (100,400);} $ this-> assign ('height', $ res); $ this-> display ();} // obtain the public function getMore () {for ($ I = 0; $ I <6; $ I ++) {$ res [$ I] = rand (100,400) ;}$ this-> ajaxReturn ($ res );}}
Note:
Determine whether the window is scrolled to the bottom of the page to load data once with ajax. If not processed, the request will be made multiple times at once. Therefore, conditions must be used to restrict the access.
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.


In a real example, when initializing data in an Action, you need to call data from the database once.
In getMore, data is also loaded at the bottom, so you must ensure that the data requested from the database is not repeated for the two times. Or you can make a judgment to complete .~ Otherwise, duplicate data will be loaded.
Friends with common interests can join a group of 252799167