简单版的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();
});
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。