jQuery怎么实现图片瀑布流效果

这篇“jQuery怎么实现图片瀑布流效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“jQuery怎么实现图片瀑布流效果”文章吧。

注意:本篇文章基于知道每张图片的实际尺寸的情况下
特点:列数自适应,图片宽度固定

已知BUG:

像本案例中的刚好5张图片循环显示且只有5列的情况下会有问题,解决办法就是给予样式的时候不按顺序,而是先将图片放在top值最低的列

1.预备

1.基础html

<div id="main">   <div class="img-item"><img src="images/img1.png" data-size="398*636" alt=""></div>   <div class="img-item"><img src="images/img2.png" data-size="560*381" alt=""></div>   <div class="img-item"><img src="images/img3.png" data-size="338*537" alt=""></div>   <div class="img-item"><img src="images/img4.png" data-size="599*507" alt=""></div>   <div class="img-item"><img src="images/img5.png" data-size="532*535" alt=""></div> </div>

新建html文件,然后将#main下一层的代码多拷贝几次,毕竟图片多才能体现瀑布流的作用

2.基础css

#main{   width: 90%;   background-color: #dab;   text-align: center;   margin:0 auto;   position: relative; } img{   width: 100%;   box-sizing:border-box;   box-shadow: 2px 0 3px #ddd,0 2px 3px #ddd; } .img-item{   position: absolute;   padding: 3px;   box-sizing:border-box;   height: auto;   display: inline-block; }

2.开始

1.声明

//获取图片列表包裹层 var $main = $('#main'); //获取窗口,用于自适应 var $mainWidth = $(window).width(); //定义图片宽度 var imgWidth = 150; //可显示的列数 var columnNumber = Math.floor($mainWidth/imgWidth); //存储top信息 var data = []; //初始化,比如当前可以显示6列,那么这里就初始化6个空间 for (var i = 0; i < columnNumber; i++) {   data[i] = 0; }

2.主体

// var wall = function() {   //获取相册图片集合   var $imgs = $('.img-item');   //遍历图片集合修改top值   $.each($imgs, function(index, el) {     //计算当前列数     var currColumn = index % columnNumber;     //获取需要显示的高度     var size = $('img', el).data('size');     var height = imgWidth / parseInt(size.split('*')[0]) * parseInt(size.split('*')[1])     $(el).css({       width: imgWidth,       left: currColumn * imgWidth,       top: data[currColumn]     });     //如果需要动画可以使用$(el).animate     data[currColumn] += height;     //本来这里只需要+=$(el).height()就可以解决,但是初始化时有些问题未解决   }); };

3.窗体大小改变事件

$(window).resize(function(event) {    //重置窗口宽度    $mainWidth = $(window).width();    //重置可显示的列数    columnNumber = Math.floor($mainWidth / imgWidth);    //动态修改#main相册包裹层的宽度,使整个相册看起来一直居中    $main.css({      width: imgWidth * columnNumber    });    //重置top信息    for (var i = 0; i < columnNumber; i++) {      data[i] = 0;    }    wall();  });

以上就是关于“jQuery怎么实现图片瀑布流效果”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。