Masonryを使って画像を一覧表示すると左右にスペースができてしまう
Masonryを使用し画像を一覧表示しています。ヘッダーのサイズに合わせて画像を一覧表示させたいのですが、画像のように両サイドが余ってしまいます。
どのようにすればヘッダーにぴったり合わせることができるでしょうか
cssだけであればぴったり表示されるのですが、masonry.jsを入れるとスペースができます。
読み込みの瞬間は正しく表示されます。(0.1秒くらいですが。。)
css
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.pinGridWrapper h1 {
font-size: 2.0em;
padding: 10px 0 10px 0;
text-align: center;
max-width: 160em;
margin: 0 auto;
}
.pinGrid {
width: 103.125%;
overflow: hidden;
margin-left: -1.562%;
margin-bottom: -1.875em;
}
.pin {
display: inline-block;
background: #fff;
border-radius: 4px;
-webkit-box-shadow: 0 6px 6px -6px #ccc;
-moz-box-shadow: 0 6px 6px -6px #ccc;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
max-width: 100%;
box-shadow: 0.5px 0.5px 0.5px 0 #8b8b8b;
width: 30.303%;
float: left;
margin: 0 1.515% 1.875em;
}
.pin img {
width: 100%;
height: auto;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 4px 4px 0 0;
}
@media only screen and ( max-width: 160em )
{
.pin
{
width: 23.088%;
margin-bottom: 0.938em;
margin-right: 0;
}
}
@media only screen and ( max-width: 70em )
{
.pin
{
width: 31.280%;
margin-bottom: 0.938em;
margin-right: 0;
}
}
@media only screen and ( max-width: 40em )
{
.pin
{
width: 47.786%;
margin-bottom: 0.938em;
}
}
@media only screen and ( max-width: 15em )
{
.pin
{
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
javascript
//masonry.js
$(document).on('ready page:change ', function() {
var $container = $('.pinGridWrapper');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: '.pin',
isFitWidth: true,
reload: true,
isAnimated: true,
animationOptions: {
duration: 200,
easing: 'swing'
}
});
});
$(function($) {
$('pin').hide();
$('pin').each(function(i) {
$(this).delay(i * 2).fadeIn(80);//デフォルト1000
});
});
});
items/_index.html.erb
<div class="pinGridWrapper">
<div class="pinGrid">
<% @items.each do |item| %><!-- アイテムインデックス start-->
<div class="pin">
<% if item.picture_1.present? %>
<%= link_to(item) { image_tag item.picture_1_url(:thumb2),:class =>"index_border_radius" } %>
<% unless item.infraction %>
<h2 class="palette-paragraph">
<%= item.title %>
</h2>
<% else %>
<h4 class="palette-paragraph">
違反アイテム
</h4>
<% end %>
<p>
<i class="fa fa-clock-o"></i>
<span class="countdown" data-until= "<%= item.limit_day.to_datetime %>" ></span>
</p>
<% else %>
<%= link_to(item) {image_tag("opps.jpg", :size => '135x135') } %>
<% end %>
</div>
<% end %><!-- アイテムインデックス end -->
</div>
</div>
items/index.html.erb
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<% if @recent_press.present? %>
<em>News </em>
<small>
<%= link_to @recent_press.title, press_url(@recent_press) %>
</small>
<% end%>
<h4 class="page-header">新着アイテム
<span class="btn-toolbar pull-right">
<span class="btn-group btn-group-xs">
<button class="btn btn-inverse dropdown-toggle" type="button" data-toggle="dropdown">
カテゴリ <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-default" role="menu">
<% Category.where(parent_id: 1).sort{|a, b| a.code <=> b.code}.each do |cat| %>
<li> <%= link_to cat.name, category_index_path(cat.id) %></li>
<li class="divider"></li>
<% end %>
</ul>
</span>
</span>
</h4>
<!-- アイテムインデックス -->
<%= render 'items/index' %>
</div>
</div>