jquery如何实现瀑布流布局

这篇文章将为大家详细讲解有关jquery如何实现瀑布流布局,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

我们提供的服务有:网站设计、成都做网站、微信公众号开发、网站优化、网站认证、密云ssl等。为千余家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的密云网站制作公司

1.看看效果吧!

jquery如何实现瀑布流布局

2.html代码index.html




 
 Title
 
 


 
  
  
  
  
  
  
  
 

3.插件代码

(function ($) {
 $.fn.flowLayout = function(options) {
 var dft = {
 gapWidth:16, //间隙
 gapHeight:16, //间歇
 column:3 //列
 };
 var ops = $.extend(dft,options);
 var _this = $(this);
 _this.width((_this.parents('.flowLayout-box').width()-2*ops.gapWidth)/3)
 var _pWidth=_this.parents('.flowLayout-box').width();
 $(".flowLayout-box").css({
 'opacity':0
 });
 var columnHeight=[],columnIndex=0;
 for (var i=0 ;imaxHeight){
 maxHeight=columnHeight[i]
 }
 }
 $(".flowLayout-box").css({
 'opacity':1,
 'height':maxHeight
 });
 return columnIndex;
 }
 }
 })(jQuery); 

4.调用代码

$(function () {
 $('.flowLayout-box li').flowLayout({});
 })

关于“jquery如何实现瀑布流布局”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


标题名称:jquery如何实现瀑布流布局
网页URL:http://pwwzsj.com/article/iishio.html