Question

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

我已经找到了一个部分合作的解决方案：

＆＃13;

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

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

但有些项目打破网格，只有1,4和7正常工作。 JSFiddle example

我来到gridly plugin的另一个解决方案。但是我无法使其响应。

是否有任何人有我可以遵循的线索。

由于

Answer 1

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

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

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

响应式网格与缩放项目

1 个答案: