

Masonryを使用し画像を一覧表示しています。ヘッダーのサイズに合わせて画像を一覧表示させたいのですが、画像のように両サイドが余ってしまいます。  
どのようにすればヘッダーにぴったり合わせることができるでしょうか
![画像の説明をここに入力](https://i.stack.imgur.com/Zjflx.png)

cssだけであればぴったり表示されるのですが、masonry.jsを入れるとスペースができます。  
読み込みの瞬間は正しく表示されます。(0.1秒くらいですが。。)

### css

[code]

    * {
        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;
        }
    }
    
[/code]

### javascript

[code]

    //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
            });
        });
    });
    
[/code]

### items/_index.html.erb

[code]

    <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>
    
[/code]

### items/index.html.erb

[code]

    <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>
    
[/code]


CC BY-SA 3.0
2015-07-22T00:24:07.013
12556
2015-07-22T06:29:47.390
2015-07-22T06:29:47.390
208
9914
question
javascript ruby-on-rails jquery css
Masonryを使って画像を一覧表示すると左右にスペースができてしまう