jQuery图片瀑布流的简单实现代码-创新互联
这篇文章主要为大家展示了“jQuery图片瀑布流的简单实现代码”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery图片瀑布流的简单实现代码”这篇文章吧。
创新互联主营思南网站建设的网络公司,主营网站建设方案,成都app开发,思南h5重庆小程序开发公司搭建,思南网站营销推广欢迎思南等地区企业咨询具体内容如下
注意:本篇文章基于知道每张图片的实际尺寸的情况下
特点:列数自适应,图片宽度固定
已知BUG:
像本案例中的刚好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(); });
以上是“jQuery图片瀑布流的简单实现代码”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联网站建设公司行业资讯频道!
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享名称:jQuery图片瀑布流的简单实现代码-创新互联
浏览路径:http://pwwzsj.com/article/cohoop.html