本文实例为大家介绍了基于jquery实现瀑布流布局的关键代码，分享给大家供大家参考，具体内容如下
效果图：
具体代码：
使用jquery-1.8.3.min.js，waterfall.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>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 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; }});
希望本文所述对大家学习有所帮助，谢谢大家的阅读。