jQuery图片瀑布流的简单实现代码

简单版的Jquery实现图片瀑布流思路，供大家参考，具体内容如下

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

已知BUG:

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

1.预备

1.基础html

rush:xhtml;">

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

2.基础css

rush: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.声明

rush:js;"> //获取图片列表包裹层 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.主体

rush:js;"> // var wall = function() { //获取相册图片集合 var $imgs = $('.img-item'); //遍历图片集合修改top值 $.each($imgs,function(index,el) { //计算当前列数 var currColumn = index % columnNumber;

//<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>需要<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>的高度
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()就可以<a href="https://www.jb51.cc/tag/jiejue/" target="_blank" class="keywords">解决</a>,但是初始化时有些问题未<a href="https://www.jb51.cc/tag/jiejue/" target="_blank" class="keywords">解决</a>

});
};

3.窗体大小改变事件

rush:js;"> $(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 瀑布流