Introduction to using Jquery waterfall flow plug-in

Because I use jquery a lot, I came up with the idea of making waterfall flow into a plug-in. Let’s borrow the beautiful pictures from Xunlei UED.

Take a look firstDemo

Publish the code

Copy the code The code is as follows:

 
;(function($){ 
var 
//参数 
setting={ 
column_width:204,//列宽 
column_className:'waterfall_column',//列的类名 
column_space:10,//列间距 
cell_selector:'.cell',//要排列的砖块的选择器，限定在瀑布流的容器内 
img_selector:'img',//要加载的图片的选择器 
auto_imgHeight:true,//是否需要自动计算图片的高度 
fadein:true,//是否渐显载入 
fadein_speed:600,//渐显速率，单位毫秒 
insert_type:1, //砖块插入方式，1为插入最短那列，2为按序轮流插入 
getResource:function(index){ } //获取动态资源函数,必须返回一个砖块元素集合,传入参数为加载的次数 
}, 
// 
waterfall=$.waterfall={}, 
$container=null;//容器 
waterfall.load_index=0, //加载次数 
$.fn.extend({ 
waterfall:function(opt){ 
opt=opt||{}; 
setting=$.extend(setting,opt); 
$container=waterfall.$container=$(this); 
waterfall.$columns=creatColumn(); 
render($(this).find(setting.cell_selector).detach(),false); //重排已存在元素时强制不渐显 
waterfall._scrollTimer2=null; 
$(window).bind('scroll',function(){ 
clearTimeout(waterfall._scrollTimer2); 
waterfall._scrollTimer2=setTimeout(onScroll,300); 
}); 
waterfall._scrollTimer3=null; 
$(window).bind('resize',function(){ 
clearTimeout(waterfall._scrollTimer3); 
waterfall._scrollTimer3=setTimeout(onResize,300); 
}); 
} 
}); 
function creatColumn(){//创建列 
waterfall.column_num=calculateColumns();//列数 
//循环创建列 
var html=''; 
for(var i=0;ihtml+='
'; 
} 
$container.prepend(html);//Insert column
return $('.' setting.column_className,$container);//Column collection
} 
 function calculateColumns(){//Calculate the required number of columns 
var num=Math.floor(($container.innerWidth())/(setting.column_width setting.column_space)); 
if(num<1) { num=1; } // Ensure at least one column 
return num; 
} 
function render(elements,fadein){//Render elements 
if(!$(elements).length) return;//No elements 
var $columns = waterfall.$columns; 
$(elements).each(function(i){ 
if(!setting.auto_imgHeight||setting.insert_type==2 ){//If the image height is given, or inserted in order, the height of the column can be calculated without waiting for the image to be loaded 
if(setting.insert_type==1){ 
insert($( elements).eq(i),setting.fadein&&fadein);//Insert element 
}else if(setting.insert_type==2){ 
insert2($(elements).eq(i),i,setting .fadein&&fadein);//Insert element 
} 
return true;//continue 
} 
if($(this)[0].nodeName.toLowerCase()=='img'|| $(this).find(setting.img_selector).length>0){//Itself is an image or contains an image 
var image=new Image; 
var src=$(this)[0].nodeName. toLowerCase()=='img'?$(this).attr('src'):$(this).find(setting.img_selector).attr('src'); 
image.onload=function() {//The size can be automatically calculated after the image is loaded 
image.onreadystatechange=null; 
if(setting.insert_type==1){ 
insert($(elements).eq(i),setting. fadein&&fadein);//Insert element
}else if(setting.insert_type==2){ 
insert2($(elements).eq(i),i,setting.fadein&&fadein);//Insert element
} 
image=null; 
} 
image.onreadystatechange=function(){//Handle the caching problem of browsers such as IE: the onload event will no longer be triggered after the image is cached
if(image .readyState == "complete"){ 
image.onload=null; 
if(setting.insert_type==1){ 
insert($(elements).eq(i),setting.fadein&&fadein) ;//Insert element
}else if(setting.insert_type==2){ 
insert2($(elements).eq(i),i,setting.fadein&&fadein);//Insert element
} 
image=null; 
} 
} 
image.src=src; 
}else{//No need to consider image loading
if(setting.insert_type==1){ 
insert($(elements).eq(i),setting.fadein&&fadein);//Insert element 
}else if(setting.insert_type==2){ 
insert2($(elements).eq( i),i,setting.fadein&&fadein);//Insert element 
} 
} 
}); 
} 
function public_render(elem){//Asynchronous data rendering interface function
render(elem,true); 
} 
function insert($element,fadein){//Insert the element into the shortest column
if(fadein){//Fade in
$element.css ('opacity',0).appendTo(waterfall.$columns.eq(calculateLowest())).fadeTo(setting.fadein_speed,1); 
}else{//Do not fade in 
$element.appendTo (waterfall.$columns.eq(calculateLowest())); 
} 
} 
function insert2($element,i,fadein){//Insert elements in sequence 
if(fadein) {//Fade
$element.css('opacity',0).appendTo(waterfall.$columns.eq(i%waterfall.column_num)).fadeTo(setting.fadein_speed,1); 
} else{//Do not fade in 
$element.appendTo(waterfall.$columns.eq(i%waterfall.column_num)); 
} 
} 
function calculateLowest(){//Calculate the shortest The index of that column 
var min=waterfall.$columns.eq(0).outerHeight(),min_key=0; 
waterfall.$columns.each(function(i){ 
if($ (this).outerHeight()min=$(this).outerHeight(); 
min_key=i; 
} 
}); 
return min_key; 
} 
function getElements(){//Get resources 
$.waterfall.load_index; 
return setting.getResource($.waterfall.load_index,public_render); 
} 
waterfall. _scrollTimer=null;//Delayed scrolling loading timer
function onScroll(){//Scrolling loading
clearTimeout(waterfall._scrollTimer); 
waterfall._scrollTimer=setTimeout(function(){ 
var $lowest_column=waterfall.$columns.eq(calculateLowest());//The shortest column
var bottom=$lowest_column.offset().top $lowest_column.outerHeight();//The distance between the bottom of the shortest column and the top of the browser window The distance
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop||0;//Scroll bar distance
var windowHeight=document.documentElement.clientHeight||document.body.clientHeight||0 ;//Window height
if(scrollTop>=bottom-windowHeight){ 
render(getElements(),true); 
} 
},100); 
} 
function onResize(){//Rearrange when the window is zoomed
if(calculateColumns()==waterfall.column_num) return; //The number of columns has not changed, no need to rearrange
var $cells=waterfall.$container. find(setting.cell_selector); 
waterfall.$columns.remove(); 
waterfall.$columns=creatColumn(); 
render($cells,false); //When rearranging existing elements Force not to fade out 
} 
})(jQuery); 

It seems that the format of pasting the code is a bit messy, so I won’t care about it for now. If you can't see the above code clearly, you can view the source file directly on the demo page.
How to use the plug-in:

Copy the code The code is as follows:

$(selector).waterfall(opt); //where selector is the selector of the waterfall flow container, opt is the configuration parameter object 

The required html structure: the html structure can be an empty container element , such as

, the brick elements inside are loaded dynamically. Of course, you can also put some bricks in advance, such as

in the demo page. Copy the code . The code is as follows:

< ;div class="cell">

< ;img src="P_003.jpg" />

< ;div class="cell">

< ;img src="P_008.jpg" />

< ;div class="cell">

< ;img src="P_013.jpg" />

< ;div class="cell">

< ;img src="P_018.jpg" />

The following is a detailed description of the functions and default values of each attribute of the configuration parameter object opt.

column_width:204 //Waterfall flow is composed of columns. This parameter specifies the width of each column. This parameter will directly affect the number of columns in the waterfall flow

column_className:'waterfall_column' //The class name of the column, easy to customize the style

column_space:10 //The spacing between columns

cell_selector:'.cell' //The selector of the bricks to be arranged is limited to the container of the waterfall flow, that is, the plug-in obtains the brick elements through this selector, and is Find elements matching this selector within the waterfall container.

img_selector:'img' //Selector for the image to be loaded. If the theme content of the brick elements to be loaded by your waterfall flow is images of varying sizes, then this parameter is the selector of these images, and the plug-in needs to obtain these images for calculation.

auto_imgHeight:true //Do you need to automatically calculate the height of the image? If the size of the image is fixed, set this parameter to false

fadein:true // Whether to fade in and load

fadein_speed:600 //Fade in speed in milliseconds

insert_type:1 //Brick insertion method, 1 means inserting the shortest column, 2 means inserting in sequence

getResource:function(index,render){ } //Get the dynamic resource function, which must return a collection of brick elements. The first parameter index passed in is the number of times it has been loaded. The second parameter is the number of times it has been loaded. The first parameter is the rendering function, which can accept a collection of brick elements as a parameter. If you use ajax to load data, you must manually call the function to render after getting the data. This function is automatically triggered every time the bottom of the waterfall is reached to load more resources.

Comment time:

The content loaded by waterfall flow is generally pictures with the same width and different heights. If the height of the picture can be known in advance, it will be much simpler. But if not, you must wait until the picture is loaded before you can calculate the height of the picture. This This is the most annoying part of the waterfall flow. It is precisely because of this that if the height of the pictures is unknown, the order of insertion may be a little confusing, and the refresh order is different every time, because the order in which each picture is loaded is not the same. It's not fixed, maybe this time is faster, next time that is faster. Therefore, if the height of the image is not known in advance, the height of the entire brick will also be unknown. The height of the brick must be calculated after the image in the brick is loaded. If this is the case but you want to ensure the insertion order of bricks, it is recommended to insert bricks in sequence, that is, set the insert_type parameter to 2. Because it is a plug-in, ease of use must be considered, but the easier it is to use, the more complex the plug-in will be inside, and the number of loopholes and bugs will increase, so I will continue to improve this plug-in.

This plug-in supports IE6, chrome, firefox, opera, safari and other mainstream browsers.

Introduction to using Jquery waterfall flow plug-in_jquery