Waterfall stream Layout Based on jquery _ jquery

This article mainly introduces the information about implementing waterfall stream Layout Based on jquery. For more information, see the examples in this article to introduce the key code for implementing waterfall stream Layout Based on jquery, the 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 = $('
').addClass('pin').appendTo( $("#main") );        var $oBox = $('
').addClass('box').appendTo( $oPin );        $('').attr('src','./images/' + $(value).attr('src')).appendTo( $oBox );      });      waterfall();    }  });  function waterfall(){    var $aPin = $( "#main>p" );    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>p");    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.