Implementation of waterfall flow layout based on jquery _jquery

The example of this article introduces the key code of waterfall flow layout based on jquery, and share it for everyone's reference, the specific contents are as follows

Effect Chart:

Specific code:

Use the Jquery-1.8.3.min.js,waterfall.js code as follows:

$ (window). Load (function (e) {waterfall ();
  var dataint = {' Data ': [{' src ': ' 1.jpg '},{' src ': ' 2.jpg '},{' src ': ' 3.jpg '},{' src ': ' 4.jpg '}]}; $ (window). Scroll (function () {if (Checkscrollside ()) {$.each (Dataint.data, function (Index,value) {var $
        Opin = $ (' <div> '). addclass (' pin '). Appendto ($ ("#main"));
        var $oBox = $ (' <div> '). addclass (' box '). Appendto ($oPin);
      $ ('  '). attr (' src ', './images/' + $ (value). attr (' src ')). Appendto ($oBox);
      });
    Waterfall ();
  }
  });
    function Waterfall () {var $aPin = $ ("#main >div");
    var ipinw = $aPin. EQ (0). Outerwidth ();
    var num = Math.floor ($ (window). Width ()/IPINW);

    $ ("#main"). CSS ({' width ': ipinw * num, ' margin ': ' 0 auto '});
    var pinharr = [];
      $aPin. Each (the function (index, value) {var Pinh = $aPin. EQ (index). Height ();
      if (Index < num) {pinharr[index] = Pinh; }else{var MinH = math.min.Apply (null, Pinharr);
        var minhindex = $.inarray (MinH, Pinharr); $ (value). css ({' position ': ' absolute ', ' top ': MinH +, "left": $aPin. EQ (minhindex). Pos
        Ition (). left});
      pinharr[Minhindex] + = $aPin. EQ (index). Height () + 15;
  }
    });
    function Checkscrollside () {var $aPin = $ ("#main >div");
    var Lastpinh = $aPin. Last (0). offsettop + Math.floor ($aPin. Last (). Height ()/2);
    var scrolltop = $ (window). scrolltop ();
    var documenth = $ (document). Height (); Return (Lastpinh < scrolltop + documenth)?
  True:false;
 }
});

I hope this article will help you learn, thank you for your reading.