答题小程序微信_jquery完成超简略的瀑布流布局【

jquery实现超简单的瀑布流布局【推荐】       本文主要介绍了jquery实现超简单的瀑布流布局的实例，代码简单，容易修改。下面跟着小编一起来看下吧

1.看看效果吧！

<

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title Title /title 
 style 
 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;}
 /style 
 script src="./jquery-1.12.4.min.js" /script 
 /head 
 body 
 li img src="./img/u17.png" alt="" /li 
 li img src="./img/u19.png" alt="" /li 
 li img src="./img/u114.png" alt="" /li 
 li img src="./img/u116.png" alt="" /li 
 li img src="./img/u118.png" alt="" /li 
 li img src="./img/u120.png" alt="" /li 
 li img src="./img/u132.png" alt="" /li 
 /ul 
 /body 
 /html 

3.插件代码

(function ($) {
 $.fn.flowLayout = function(options) {
 var dft = {
 gapWidth:16, //间隙
 gapHeight:16, //间歇
 column:3 //列
 var o凡科抠图 = $.extend(dft,options);
 var _this = $(this);
 _this.width((_this.parents('.flowLayout-box').width()-2*o凡科抠图.gapWidth)/3)
 var _pWidth=_this.parents('.flowLayout-box').width();
 $(".flowLayout-box").css({
 'opacity':0
 var columnHeight=[],columnIndex=0;
 for (var i=0 ;i o凡科抠图.column;i++){
 columnHeight.push(0);
 setTimeout(function () {
 for(var j =0 ; j _this.length ;j++){
 console.log(columnHeight[columnIndex]);
 $(_this).eq(j).css({
 'top':columnHeight[columnIndex]+o凡科抠图.gapHeight+'px',
 'left':_pWidth*columnIndex/3+'px'
 columnHeight[columnIndex]+=$(_this).eq(j).height()+o凡科抠图.gapHeight
 columnIndex=getIndex();
 },50)
 function getIndex() {
 var columnIndex=0,maxHeight=0;
 for(var i =0 ;i columnHeight.length ;i++){
 if(columnHeight[i] columnHeight[columnIndex]){
 columnIndex=i;
 if(columnHeight[i] maxHeight){
 maxHeight=columnHeight[i]
 $(".flowLayout-box").css({
 'opacity':1,
 'height':maxHeight
 return columnIndex;
 })(jQuery); 

4.调用代码

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

代码简单，容易修改，，拿去用吧。。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持凡科！