基于jquery实现瀑布流布局,jquery瀑布布局

依据jquery实现瀑布流结构,jquery瀑布布局

正文实例为我们介绍了基于jquery实现瀑布流构造的要害代码,分享给我们供大家参照他事他说加以考查,具体内容如下

效果图:

图片 1

现实代码:

运用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;
  }
});

愿意本文所述对大家学习抱有助于,多谢我们的阅读。

你可能感兴趣的篇章:

  • jQuery 瀑布流 浮动构造(大器晚成)(延迟AJAX加载图片State of Qatar
  • jQuery 瀑布流 相对定位布局(二)(延迟AJAX加载图片卡塔尔国
  • Jquery瀑布流插件使用介绍
  • jQuery.lazyload+masonry修改图片瀑布流代码
  • jQuery Masonry瀑布流插件使用详细解释

本文实例为我们介绍了基于jquery达成瀑布流构造的首要代码,分享给大家供咱们参谋,具体内容如…

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图