响应式网格与缩放项目

Question

我在这里遇到麻烦.我需要一个响应式图像网格,我们可以放大每个图像,所有其他图像应自动重新排列在空白空间.

我找到了一个部分合作的解决方案:

$(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示例

我来到另一个解决方案,它是网格插件.但我无法使其响应.

有没有人知道我可以效仿.

谢谢