响应式瀑布流插件Grid-A-Licious

Grid-A-Licious是一款遵守MIT协议的响应式瀑布流插件。该插件总代码行不超过400行，实现很巧妙，使用时也很流畅。实现原理也很简单，根据屏幕宽度和参数中设置的列宽度以及每项之间的间隔宽度，计算出当前屏幕宽度下应该生成几个等宽列；列生成好之后，再把每项放到等宽列中；当屏幕尺寸改变时，重新计算列表，然后再重新填充项。

使用该插件也很方便。使用实例：

	
		
		
	
	
		

			
这是瀑布流中的一项
			
这是瀑布流中的一项
			
这是瀑布流中的一项
			
这是瀑布流中的一项
			
这是瀑布流中的一项
			
这是瀑布流中的一项
			
这是瀑布流中的一项
			
这是瀑布流中的一项
			
这是瀑布流中的一项
			
这是瀑布流中的一项
			.....
		
		
		
		
	
            

　　

插件默认参数：

{
        selector: '.item',　　//设置瀑布流中每一项的类名
        width: 225,　　　　　　//设置等宽列的宽度，默认225，注意后面不要加"px"
        gutter: 20,　　　　　　//设置瀑布流中没项的间隔，默认20，注意后面不要加"px"
        animate: false,      //设置生成瀑布流的动画效果，默认无动画效果
        animationOptions: {  //动画效果控制选项
            speed: 200,　　　　　　　　　　
            duration: 300,　　　　　　　　
            effect: 'fadeInOnAppear',　 //目前就这一种动画效果
            queue: true,
            complete: function () {}　　//动画完成后的回调
        }
}

以上参数均为可选参数。

插件效果实例http://suprb.com/apps/gridalicious/

插件源码下载https://github.com/suprb/Grid-A-Licious　

转载于:https://www.cnblogs.com/adtxgc/p/4399704.html