jQuery

【jQuery】画像などをまっすぐに配置するための軽量のjQueryプラグインrowGrid

April 8, 2017
rowgrid

rowGridはイメージ(または他のアイテム)をストレートに配置するための軽量のjQueryプラグイン。

Installation

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.row-grid.min.js"></script>

HTML

<div class="container">
  <div class="item">
    <img src="path/to/image" width="120" height="100" />
  </div>
  <div class="item">
    <img src="path/to/image" width="130" height="100" />
  </div>
  ...
</div>

CSS

.container {
  background: #eee;
}
/* clearfix */
.container:before,
.container:after {
    content: "";
    display: table;
}
.container:after {
    clear: both;
}

.item {
  float: left;
  margin-bottom: 10px; 
}
.item img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: bottom;
}
.first-item {
  clear: both;
}
/* remove margin bottom on last row */
.last-row, .last-row ~ .item {
  margin-bottom: 0;
}

JS

$(document).ready(function() {
  var options = {minMargin: 5, maxMargin: 15, itemSelector: ".item", firstItemClass: "first-item"};
  $(".container").rowGrid(options);
});

MIT