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

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

创新互联建站"三网合一"的企业建站思路。企业可建设拥有电脑版、微信版、手机版的企业网站。实现跨屏营销，产品发布一步更新，电脑网络+移动网络一网打尽，满足企业的营销需求！创新互联建站具备承接各种类型的成都网站设计、做网站、成都外贸网站建设公司项目的能力。经过十载的努力的开拓，为不同行业的企事业单位提供了优质的服务，并获得了客户的一致好评。

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

已知BUG:

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

1.预备

1.基础html

#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; }

//获取图片列表包裹层 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; }

// 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()就可以解决,但是初始化时有些问题未解决 }); };

$(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怎么实现图片瀑布流效果

其他资讯