SoFunction
Updated on 2025-03-01

js custom waterfall flow layout plugin

Waterfall layout is a layout method commonly used in web pages. Its layout has the following characteristics:

Waterfall layout features:

(1) The graphic elements are arranged in columns
(2) The column width is the same, but the height is not equal
(3) During the layout process, data will be supplemented with the column with the lowest height will be given priority.

Here is a custom jQuery waterfall flow plugin:

(function ($) {
 $.({
  myWaterfull: function () {

   var parentWidth = $(this).width(); //Get the width of each row   var childItems = $(this).children();
   var childWidth = (); //Get the column width of each column   var column = 5; //Define how many columns each row has   // Calculate and set the gap between columns   var space = (parentWidth - column * childWidth) / (column - 1);
   //Declare an array to store the height of each column in the first row   var arrHeight = [];

   //Arrange and layout the child elements   $.each(childItems, function (index, item) {
    if (index < column) { //Arrange the columns in the first row and layout     $(item).css({
      top: 0,
      left: index * (childWidth + space)
     });
     ($(item).height() + space); //Add the height of the column in the first row to the array    } else {
     // Find the column with the smallest height     var minIndex = 0;
     var minValue = arrHeight[minIndex];
     //Loop traversal to find the smallest column high value     for (var i = 0; i < ; i++) {
      if (minValue > arrHeight[i]) {
       minValue = arrHeight[i];
       minIndex = i;
      }
     }

     //Arrange and layout the remaining child elements one by one     $(item).css({
      top: minValue + space,
      left: minIndex * (childWidth + space)
     });

     //Update the minimum column height     arrHeight[minIndex] += $(item).height() + space;
    }
   });

   //Since the child elements are laid out by positioning here, the height of the parent element needs to be updated   //Of course, you can also use float to layout child elements   var maxHeight = 0;
   for (var i = 0; i < ; i++) {
    if (maxHeight < arrHeight[i]) {
     maxHeight = arrHeight[i];
    }
   }

   //Set the height of the parent element   $(this).height(maxHeight);

  }
 });
})(jQuery);

Example of usage:

Here is an HTML structure:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>Waterfall flow case original</title>
 <style>
* {
 margin: 0;
 padding: 0;
}

body {
 font-family: Microsoft Yahei;
 background-color: #f5f5f5;
}

.container {
 width: 1200px;
 margin: 0 auto;
 padding-top: 50px;
}

.container > .items {
 position: relative;
}

.container > .items > .item {
 width: 232px;
 position: absolute;
 box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
 overflow: hidden;
}

.container > .items > .item > img {
 width: 100%;
 display: block;
 height: 232px;
}

.container > .items > .item:nth-child(3n) > img {
 width: 100%;
 display: block;
 height: 350px;
}

.container > .items > .item > p {
 margin: 0;
 padding: 10px;
 background: #fff;
}

.container > .btn {
 width: 280px;
 height: 40px;
 text-align: center;
 line-height: 40px;
 background-color: #ccc;
 border-radius: 8px;
 font-size: 24px;
 cursor: pointer;
}

.container > .loading {
 background-color: transparent;
}
</style>
</head>
<body>
<div class="container">
 <div class="items">

 </div>
 <div class="btn loading">Loading...</div>
</div>

Write a script file, here suppose you get the data of child elements from the background and render the data to the page using the artTemplate template engine:

<script src="JS/"></script>
<script src="JS/"></script>
<script src="JS/"></script>

//Define engine template<script  type="text/html">
 {{ each items as item index}}
 <div class="item">
  <img src="{{}}" alt="">
  <p>{{}}</p>
 </div>
 {{/each}}
</script>

//Writing script$(function () {
 //Request data from the server according to the interface document var page = 1, pageSize = 20;
 //When the DOM structure is loaded, the render function is called once render();
 function render() {
  $.ajax({
   type: "get",
   url: "php/",
   data: {
    page: page,
    pageSize: pageSize
   },
   beforeSend: function () { //Change the content of the button before sending the request    $(".btn").html("Loading...").addClass("loading");
   },
   success: function (data) {
    //2. Render data with the help of the template engine    var tplStr = template("template", data);
    $(".items").append(tplStr);
    $(".items").myWaterfull();
    // When loading is complete, change the button content and style    $(".btn").html("Load More").removeClass("loading");
    //When the background data is displayed, prompt the user    if ( < pageSize) {
     $(".btn").html("No more content").addClass("loading");
    }
    //After each response is successful, the page returned from the background will be saved.    page = ;
   }
  });
 }

 // When the button is clicked, the next page of data is loaded $(".btn").on('click',function () {
  if($(".btn").hasClass("loading")) return false;
  render();
 });

 //Load data when the page scrolls to the bottom of the data $(window).on('scroll',function () {
  //Judge whether to scroll to the bottom  var isBottom = ($('.items').height()-($(window).height()-$('.items').offset().top))-$(window).scrollTop();
  if (isBottom <= 200 && !$('.btn').hasClass("loading")) render();
 });


});

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.