javascript - 带有缩放元素的响应式网格

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 example
我找到了另一个解决方案，即 gridly plugin .但我无法使其响应。
我怎样才能使这项工作？

Answer 1

对于这个例子来说，使用百分比和相对位置是一团糟。
检查同位素示例

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

单击右侧的示例。它使用绝对位置(和一些计算)