jQuery

【jQuery】jQueryを使用した石積みレイアウトMasonry Ordered

October 8, 2016
jQuery Masonry Ordered

Masonry OrderedはjQueryを使用した石積みレイアウト。

Markup

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="/path/to/jquery.masonry.min.js"></script>
<script src="/path/to/jquery.masonry.ordered.js"></script>

オプション

$('#container').masonry({
  itemSelector: '.box',
  columnWidth: 240,
  layoutPriorities: {
    // Masonry default: Try to occupy highest available position.
    // Weight: Pixels of vertical distance from most upper spot.
    upperPosition: 1,
    // Shelf order: Try to display bricks in original order.
    //   (increases ordered-ness, decreases space-efficiency)
    // Weight: Pixels of distance of current brick's top left corner
    //         from previous brick's top right corner.
    shelfOrder: 1
  }
});

MITライセンス