欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-24 19:33:40
简单版的jquery实现图片瀑布流思路,供大家参考,具体内容如下 注意:本篇文章基于知道每张图片的实际尺寸的情况下 特点:列数自适应,图片宽度固定 已知bug: 像...

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

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

已知bug:

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

1.预备

1.基础html

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。