基于jquery实现瀑布流布局

这篇文章主要介绍了基于jquery实现瀑布流布局的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家介绍了基于jquery实现瀑布流布局的关键代码，分享给大家供大家参考，具体内容如下

效果图：

具体代码：

使用jquery-1.8.3.min.js，waterfall.js代码如下：

 $( window ).load( function(e){ waterfall(); var dataInt = { 'data': [{ 'src': '1.jpg-600' },{ 'src': '2.jpg-600' },{ 'src': '3.jpg-600' },{ 'src': '4.jpg-600' }]}; $(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; } }); 

希望本文所述对大家学习有所帮助，谢谢大家的阅读。
以上就是基于jquery实现瀑布流布局的详细内容，更多请关注本站其它相关文章！