Implement waterfall stream layout and jquery waterfall Layout Based on jquery

Implement waterfall stream layout and jquery waterfall Layout Based on jquery

This article introduces the key code for implementing waterfall stream Layout Based on jquery and shares it with you for your reference. The specific content is as follows:

:

Code:

The waterfall. js code is as follows using the jquery-1.8.3.min.js:

$( 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(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 + 15,          'left': $aPin.eq( minHIndex ).position().left        });        pinHArr[ minHIndex ] += $aPin.eq( index ).height() + 15;      }    });  }  function checkscrollside(){    var $aPin = $("#main>div");    var lastPinH = $aPin.last().get(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 with your learning. Thank you for reading this article.

Articles you may be interested in:

• JQuery waterfall floating layout (1) (loading images with delayed AJAX)
• JQuery waterfall stream absolute positioning layout (2) (loading images with delayed AJAX)
• Introduction to Jquery waterfall stream plug-in
• JQuery. lazyload + masonry improved image waterfall stream code
• JQuery Masonry waterfall stream plug-in Usage Details