jquery_jquery를 기반으로 폭포 흐름 레이아웃 구현

본 글의 예시에서는 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 ) &#63; true : false;
  }
});

이 글이 여러분의 공부에 도움이 되기를 바랍니다. 읽어주셔서 감사합니다.