How to implement Waterfall flow layout with jquery

This article introduces the relevant knowledge of "jquery how to realize waterfall flow layout". In the operation process of actual cases, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

1. Look at the effect!

2.html Code index.html

Title ul{position: relative;padding: 0 -3px;list-style: none;width: 600px;margin: 0 auto} li{width: 33.33%;position: absolute;box-sizing: border-box;display: block; } img{width: 100%;height: auto;display: block;}

3. plug-in code

(function ($) { $.fn.flowLayout = function(options) { var dft = { gapWidth:16, //gap gapHeight:16, //intermittent column:3 //column}; 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 ;i