[JQuery API] masonry

masonry ... 몇년전에 본건대도 불구하고 비슷한 디자인을 할땐 이걸 계속 쓴다. 딱히 찾는게 귀찮기도 하고.... 어쨋든 사용중이므로 필요한 기능이 추가되거나 하면 여기에도 업데이트 할 예정이다.

###### 이미리 로딩 후, 마소니가 적용되었으면 좋겠어!! 라면.

(참조 경로 => http://masonry.desandro.com/layout.html)  들어간 후 imagesLoaded 를 검색하세요.!

여기서는 다른 API 를 이용해서 하라고 권하고 있다. 그것은 바로 imagesLoaded !!

경로 => http://imagesloaded.desandro.com/

해서 다음과 같이 적용하면 되겠다.

<!-- 일단 다운받은 후 이렇게 적용시켜 주고... -->

<script src="/js/vender/imagesloaded.pkgd.min.js"></script>

<script>

$(function(){

var $grid =  $(".items").masonry({

 columnWidth: 250

, isFitWidth: true

//, itemSelector: '.item'

});

/* 이미지가 모두 완료된 후에야, masonry 적용 

*  참조 => http://masonry.desandro.com/layout.html    들어간 후 imagesLoaded  검색

*/

$grid.imagesLoaded().progress(function(){    // 이렇게 해두면 이미지로딩이 완료된 후에, 마소니를 적용한다.

$grid.masonry('layout');

});

});

</script>

###### 가운데 정렬을 할거라면 

(참조 경로 => http://codepen.io/desandro/pen/nGLvx)

마소니를 적용할 아이템들의 상위를 감싼 후 상위 태그에 margin:0 을 주고 masonry 옵션에 'isFitWidth: true' 를 넣어주면 해결

<style>

.items{

margin: 0 auto;

}

.draggabel_test{

  width: 250px;

  height: 120px;

  float: left;

  background: #D26;

  border: 2px solid #333;

  border-color: hsla(0, 0%, 0%, 0.5);

  border-radius: 5px;

}

</style>

<script>

var $grid =  $(".items").masonry({

 itemSelector: '.draggabel_test'

, isFitWidth: true                // 가운데 정렬을 해줌

, columnWidth: 250            // 이건 masonry 에서 필요한 width 를 적은것.(style의 것이랑은 별개임)

});

</script>

<div class="items">

  <div class="item">내용</div>

  <div class="item">내용</div>

  <div class="item">내용</div>

.

.

.

</div>