jQuery simply implements picture waterfall flow

We have shared many articles about waterfall flow before. In this article, we mainly introduce the simple implementation code of jQuery image waterfall flow in detail. It has certain reference value. Interested friends can refer to it. I hope Can help everyone.

Note: This article is based on knowing the actual size of each picture
Features: adaptive column number, fixed picture width

Known BUG:

There will be problems when exactly 5 pictures are displayed in a loop and there are only 5 columns in this case. The solution is to give the style not in order, but to put the pictures on the top with the lowest value first. Column

1.Preparation

1.Basic 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>

New html file, Then copy the code of the next layer of #main several times. After all, more pictures can reflect the effect of waterfall flow

2. Basic 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.Start

1.Declaration

//获取图片列表包裹层
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.Subject

//
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. Form size change event

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

Related recommendations:

Detailed explanation of the use of pure native JS waterfall flow plug-in Macy.js

jQuery Masonry waterfall flow layout detailed explanation

JS implementation of waterfall flow layout example

The above is the detailed content of jQuery simply implements picture waterfall flow. For more information, please follow other related articles on the PHP Chinese website!