レスキューグリッドでアイテムをズームする

Question

私はここで問題があります。私はそれぞれの画像をズームすることができ、他のすべての画像は空のスペースに自動的に並べ替えるべき応答性の高い画像グリッドが必要です。私は解決策のウィッヒに来ている

はpartialy作品：

$(document).ready(function() { 
 
    $("#wrapper div").click(function() { 
 
     if ($(this).siblings().hasClass('expanded')) { 
 
      $(this).siblings().removeClass('expanded'); 
 
     } 
 
     $(this).addClass('expanded'); 
 
    }); 
 
});

.wrapper { 
 
    width:100%; 
 
    margin:0 auto; 
 
} 
 
.wrapper div { 
 
    width:31%; 
 
    margin:1%; 
 
    float:left; 
 
    -webkit-transition: width 1s; 
 
    transition: width 1s; 
 
} 
 
.expanded { 
 
    width:64% !important; 
 
} 
 
img { 
 
    width:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<div class="wrapper" id="wrapper"> 
 
    <div> 
 
     <img src="http://i.imgur.com/m9kLJMi.jpg"> 
 
    </div> 
 
    <div> 
 
     <img src="http://i.imgur.com/1fR1mQQ.jpg"> 
 
    </div> 
 
    <div> 
 
     <img src="http://i.imgur.com/CFf5bbM.jpg"> 
 
    </div> 
 
    <div> 
 
     <img src="http://i.imgur.com/3U2gd7I.jpg"> 
 
    </div> 
 
    <div> 
 
     <img src="http://i.imgur.com/N4pFnCE.jpg"> 
 
    </div> 
 
    <div> 
 
     <img src="http://i.imgur.com/q81AaCs.jpg"> 
 
    </div> 
 
    <div> 
 
     <img src="http://i.imgur.com/wjjhTtW.jpg"> 
 
    </div> 
 
    <div> 
 
     <img src="http://i.imgur.com/9fifhrM.jpg"> 
 
    </div> 
 
    <div> 
 
     <img src="http://i.imgur.com/gz5Qdv6.jpg"> 
 
    </div> 
 
</div>

しかし、いくつかの項目が適切にグリッド、唯一の1、4、7作品を破ります。 JSFiddle example

gridly pluginという別の解決方法があります。しかし、私はそれを反応させることができません。

誰でも私が従うことができる手掛かりがありますか？百分率及び相対位置での作業

おかげ

Answer 1

は、この例の混乱です。 チェック同位体の例右の例で

http://isotope.metafizzy.co/methods.html#layout

クリックします。私は好奇心が強いので、絶対位置（および何らかの計算）を使用します。