jQuery简单实现图片瀑布流

来源：动视网责编：小OO 时间：2020-11-27 20:05:07

jQuery简单实现图片瀑布流

注意：本篇文章基于知道每张图片的实际尺寸的情况下。特点：列数自适应，图片宽度固定。已知BUG。像本案例中的刚好5张图片循环显示且只有5列的情况下会有问题，解决办法就是给予样式的时候不按顺序，而是先将图片放在top值最低的列。1.预备；1.基础html；

推荐度：

点击下载本文 文档为doc格式

导读注意：本篇文章基于知道每张图片的实际尺寸的情况下。特点：列数自适应，图片宽度固定。已知BUG。像本案例中的刚好5张图片循环显示且只有5列的情况下会有问题，解决办法就是给予样式的时候不按顺序，而是先将图片放在top值最低的列。1.预备；1.基础html；

我们在前面就分享过很多关于瀑布流的文章，本文我们主要为大家详细介绍了jQuery图片瀑布流的简单实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

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

已知BUG:

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

1.预备

1.基础html

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

新建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.声明

2.主体

3.窗体大小改变事件