jquery怎么实现瀑布流布局

本篇内容介绍了"jquery怎么实现瀑布流布局"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

1.看看效果吧！

2.html代码index.html

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怎么实现瀑布流布局"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！