目录

Jquery实现图片瀑布流思路-简单版

注意:本篇文章基于知道每张图片的实际尺寸的情况下

特点:列数自适应,图片宽度固定

已知BUG:

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

1.预备

1.基础html

新建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(); });