基于jquery实现瀑布流布局

前端技术 2023/09/03 JavaScript

本文实例为大家介绍了基于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 = $(\'<div>\').addClass(\'pin\').appendTo( $(\"#main\") );
        var $oBox = $(\'<div>\').addClass(\'box\').appendTo( $oPin );
        $(\'<img>\').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;
  }
});

希望本文所述对大家学习有所帮助，谢谢大家的阅读。

本文地址：https://www.stayed.cn/item/8071

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案