Jquery.masonry + jquery.infinitescroll for waterfall flow layout

Reprinted from: http://www.cnblogs.com/liubiaocai/archive/2013/04/26/3044503.html

Waterfall Flow layout is very popular recently, the domestic large and small waterfall flow layout of the site are many, such as beautiful, mushroom street, petals, etc., about the waterfall flow layout of the information can be Baidu self-read, here are introduced two Jquey plug-ins to achieve waterfall flow layout and dynamic loading data (page load).

1,jquery.masonry, the current layout of popular waterfall stream plug-ins have a lot, http://www.csswang.com/resource/2261.html, here are a lot of introductions, This plug-in is a more popular one, the document also layout details, official website address: http://masonry.desandro.com, detailed everyone can go to the official website to see, as long as a simple few words JS code can be implemented waterfall flow layout, code as follows:

$(‘.wrapper:eq(1)‘).masonry({     itemSelector: ‘.wfc‘,     gutterWidth: 15,     columnWidth: 222,     isFitWidth: true });

The following core parameters are introduced here, others can be viewed on the official website;

Itemselector class selector, default '. Item ', which represents the selector for each block
ColumnWidth width of a column
IsAnimated using jquery's layout change, default True
Animationoptions Animate property Gradient effect (Object {queue:false, duration:500})
Gap Integer for gutterwidth column
Isfitwidth Adaptive Browser Width boolean
Isresizablel whether the size is resizable Boolean
Isrtl using right-to-left layout Boolean

2, Jquery.infinitescroll, with the waterfall flow layout, we also need a dynamic loading function, that is, the browser scroll bar scrolling to the bottom of the time, the need to dynamically load the data, here describes the use of paging to load the data, Plug-in name is Jquery.infinitescroll, the official website address is: http://www.infinite-scroll.com, detailed explanation can go to the official website to view, here introduces some of his core parameters

Itemselector class selector, default ' Div.post ', which represents the block selector for the waterfall stream described above
Nextselector represents the selector for the next page of the page, the default is Div.navigation A:first
Navselector represents a selector for pager navigation, which is hidden
Extrascrollpx How many pixels from the bottom of the scroll bar start loading, default 150
DataType represents the format of dynamically loading returned data, the default HTML
The template means that when the JSON is returned, the method used to generate the HTML code of the waterfall stream block, if the return is JSON, you must specify this parameter, otherwise it will be an error

The general code is as follows:

$(‘#waterfall‘).infinitescroll({                 navSelector: "#navigation", //导航的选择器，会被隐藏                 nextSelector: "#navigation a", //包含下一页链接的选择器                 itemSelector: ".wfc", //你将要取回的选项(内容块)                 debug: true, //启用调试信息                 animate: true, //当有新数据加载进来的时候，页面是否有动画效果，默认没有                 extraScrollPx: 150, //滚动条距离底部多少像素的时候开始加载，默认150                 bufferPx: 40, //载入信息的显示时间，时间越大，载入信息显示时间越短                 errorCallback: function() {                     alert(‘error‘);                 }, //当出错的时候，比如404页面的时候执行的函数                 localMode: true, //是否允许载入具有相同函数的页面，默认为false                 dataType: ‘html‘,//可以是json //                template: function(data) { //                    //data表示服务端返回的json格式数据，这里需要把data转换成瀑布流块的html格式，然后返回给回到函数 //                    return ‘‘; //                },                 loading: {                     msgText: "加载中...",                     finishedMsg: ‘没有新数据了...‘,                     selector: ‘.loading‘// 显示loading信息的div                 }             }, function(newElems) {                 //程序执行完的回调函数                 var$newElems = $(newElems);                 $(‘.wrapper:eq(1)‘).masonry(‘appended‘, $newElems);             });

　　

For Jquery.infinitescroll This plugin, online a lot of introduction including official website also has, but are not very detailed, here shows the place to note:

1, pager HTML format problem, not arbitrary HTML can be, must have a certain format, specific can see plug-in source code, format such as: Page.aspx?page=1 or page/2/, and other formats please see the source; the number increments by 1 before each load. Background can be used request["page"] to obtain parameters;

2, if you want to JSON data, you must specify the datatype parameter as JSON, and set template method, the method receives a JSON data, and then replace the JSON with the waterfall stream of HTML can be;

3, after the data return, need to recall the waterfall stream plug-in re-layout, query.infinitescroll after the data returned again, in the form of: $ (' #content '). Infinitescroll ({},function (Newelems) {//newelems represents the returned data, if JSON is the return value of the template}) ；

Demo download