벽돌컨텐츠, 스와이프 배너

벽돌컨텐츠 http://masonry.desandro.com/layout.html

가로사이즈가 유동적인 경우 sizer라는 div를 넣고, columnWidth를 grid-sizer로 넣는다.

<div class="grid">
  <!-- width of .grid-sizer used for columnWidth -->
  <div class="grid-sizer"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  ...
</div>

/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 20%; }
/* 2 columns */
.grid-item--width2 { width: 40%; }

$('.grid').masonry({
  // set itemSelector so .grid-sizer is not used in layout
  itemSelector: '.grid-item',
  // use element for option
  columnWidth: '.grid-sizer',
  percentPosition: true
})

벽돌컨텐츠 모션있는것 http://isotope.metafizzy.co/index.html

 

스와이프 배너 http://flickity.metafizzy.co/extras.html (마우스 스크롤 배너)