jQuery Image Waterfall Stream Simple Implementation Code

The simple version of Jquery realizes the idea of picture waterfall flow for your reference, and the specific contents are as follows

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

Known BUG:

As in this case, there will be a problem when just 5 pictures are displayed cyclically and there are only 5 columns. The solution is to give the styles out of order, but put the pictures in the column with the lowest top value first

Step 1 Prepare

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

New html file, and then # main layer 1 code copy several times, after all, many pictures can reflect the role 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;
}

Step 2 Start

1. Statement

// Get the picture list wrapping layer 
var $main = $('#main');
// Get window , Used for self-adaptation 
var $mainWidth = $(window).width();
// Define picture width 
var imgWidth = 150;
// Number of columns that can be displayed 
var columnNumber = Math.floor($mainWidth/imgWidth);
// Storage top Information 
var data = [];
// Initialization , For example, you can currently display 6 Column , Then initialize here 6 Individual space 
for (var i = 0; i < columnNumber; i++) {
  data[i] = 0;
}

2. Subject

//
var wall = function() {
  // Get album picture collection 
  var $imgs = $('.img-item');
  // Traversing Picture Collection Modifications top Value 
  $.each($imgs, function(index, el) {
    // Calculate the current number of columns 
    var currColumn = index % columnNumber;

    // Gets the height to be displayed 
    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]
    });

    // If you need animation, you can use $(el).animate
    data[currColumn] += height;
    // Originally, all we needed here was +=$(el).height() It can be solved , However, some problems were not solved during initialization 
  });
};

3. Form Size Change Events

$(window).resize(function(event) {
   // Reset window width 
   $mainWidth = $(window).width();
   // Reset the number of columns that can be displayed 
   columnNumber = Math.floor($mainWidth / imgWidth);
   // Dynamic modification #main Width of album wrapping layer , Make the whole album look like 1 Straight center 
   $main.css({
     width: imgWidth * columnNumber
   });
   // Reset top Information 
   for (var i = 0; i < columnNumber; i++) {
     data[i] = 0;
   }
   wall();
 });