Custom plug-in of vertical waterfall flow based on jquery

The company's new project has made a plate about pictures. It found some waterfall plug-ins on the Internet that are not very suitable for itself, so it made its own wheel to write one and encapsulate it into a plug-in

So I want to share it, mainly for better learning and memory.

If you come in, I hope you can give me github a free star. Come gently, don't go quietly. Thank you-


Here is an introduction (you can also go github see


waterfall with jquery prototype function

A simple jq plug-in with es6 syntax for vertical waterfall flow

Plug in features:

  • The data is flexible. You can request the data loading page in the background or add elements directly to the html. Generally, the first page is placed
  • Multiple pages can be placed on the same page. Use tab to switch between no refresh
  • Automatically request to load data before page scrolls to the bottom
  • Dynamically generate loading prompt at the bottom of the data or end of loading
  • Can be configured to adapt to resize, general pc to mobile response
  • Customize the spacing between waterfall flow elements, and the content can be placed according to the style width
  • es6 syntax promise function to ensure the layout of pictures after loading

Plug in dependency

  • jQuery 2.1.4
  • Plug in environment es6 syntax, browser needs babel escape

Usage method

  1. Introduced after jquery.js
  2. Custom waterfall flow container, set initial height, need relative positioning
  3. Customize waterfall flow elements, define width and default style, and adjust height according to pictures (default class="item")
  4. Container calls plug-in method
// Acceptance parameter
    ** item: '.item',  Waterfall flow element class name
    ** spaceBetween: 10, Element spacing
    ** resize: true, Whether to adapt to the window
    ** checkNav: '', Here is when there is a tab switch, the parent container of the tab element
    ** ajaxData: null, Scroll load data custom function, data processing method, etc., user-defined and easy to use
    ** tipObj: { Prompt box at the bottom of dynamic loading data
        tipDom: '#no-data',
        text0: 'It's all over ~ ',
        text1: '↓ Drop down to load more ',


// ajaxData: fn(success). Here, the callback function takes a function parameter. If the data is obtained successfully, you need to call it actively
// If there is data success(str, 1), there is no data success('', 0)
// str is the return waterfall element string that you have processed here

// Give an example

// Waterfall flow element
let template = `
    <li class="item" data-id="{ id }">
        <a href="{ url }" title="{ title }">
            <img src="{ thumb }" title="{ title }">
            <div class="mask">
                <div class="img-operate">
                    <span class="collect"><i class="icon-collect"></i></span>
                    <span class="download-other fr">source file</span>
                    <span class="download-jpg fr">Original graph</span>
                <div class="img-title common_ovh">{ title }</div>
let curPage = 2, filterData = { Some data };

// Background data acquisition interface method
function getListAjax(callback) {
        let data = filterData; = curPage;

            url: '/api/get_photo_list',
            type: 'POST',
            data: data,
        .done(function(res) {
            let str = "";
            if(res.code == 200) {
                $.each(, function(index, el) {
                    str += template
                        .replace("{ thumb }", el.thumb)
                        .replace("{ id }",
                        .replace("{ url }", el.url)
                        .replace(/{ title }/g, el.title)

            callback(res, str)
        .fail(function(error) {

//Container. toWaterfall({
        ajaxData: function(success) {
            getListAjax(function(res, str) {
                if(res.code == 200) {
                }else {
                    success('', 0);

Design sketch

Tags: Javascript JQuery github Mobile

Posted on Tue, 03 Dec 2019 17:25:45 -0500 by POGRAN