jquery - 使用 jquery 在响应式布局中显示当前行 div 下方隐藏的 div

Question

我有一个图片库的响应式布局，它会根据用户的屏幕宽度每行显示 3、2 或 1 张图片。这是 CSS 的一部分，它将决定每行显示多少张图片:

@media only screen and (max-width : 480px) {
/* Smartphones: 1 image per row */
.box {
  width: 100%;
  padding-bottom: 100%;
}
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
/* Tablets: 2 images per row */
.box {
  width: 50%;
  padding-bottom: 50%;
}
}
@media only screen and (min-width : 651px) {
/* large screens: 3 images per row */
.box {
  width: 33.3%;
  padding-bottom: 33.3%;
}
}

对于每个“.box”div，还有另一个(最初隐藏的)div，当点击一个按钮时，它应该显示在当前图像行的下方。这个隐藏的 div 的宽度总是 100%，所以它会填满一整行。

在每行显示三张图片的桌面浏览器上，它看起来像这样

    <div class="box">
        <div class="boxInner">
            <img src="../img/img1.jpg">
            <div class="infoBox">
                <button class="detailLink" name="det1">Show Details</button>
            </div>
        </div>
    </div>
    <div class="box">
        <div class="boxInner">
            <img src="../img/img2.jpg">
            <div class="infoBox">
                <button class="detailLink" name="det2">Show Details</button>
            </div>
        </div>
    </div>
    <div class="box">
        <div class="boxInner">
            <img src="../img/im3.jpg">
            <div class="infoBox">
                <button class="detailLink" name="det3">Show Details</button>
            </div>
        </div>
    </div>
    <div class="detailWrapper" id="det1">
        <div class="detail">Details for img1</div>
    </div>
    <div class="detailWrapper" id="det2">
        <div class="detail">Details for img2</div>
    </div>
   <div class="detailWrapper" id="det3">
        <div class="detail">Details for img3</div>
    </div>

这是将切换带有详细信息的 div 的脚本:

<script>
    $(".detailLink").click(function () {
      var id = $(this).attr("name");
      $("#"+id).slideToggle("slow");
    });
</script>

如果单击 im1 的按钮，现在看起来像这样:

http://postimg.org/image/b2tfnpwgn/

但是如果我调整浏览器窗口的大小，使每行只显示一个或两个图像，显然第一张和第二张图像最初隐藏的 div 将不再显示在第一行下方，而是显示在第二行下方。

我不知道如何重写此代码，以便它始终在实际图像下方的行中显示最初隐藏的 div，无论每行显示 1、2 还是 3 个图像。我可以创建三个单独的页面并根据屏幕宽度将浏览器重定向到它们，但这似乎有些多余，必须有更好的解决方案。

我在 Stackoverflow 上的第一个问题 - 希望我做对了。

Answer 1

您需要一个 javascript 解决方案来在调整窗口大小时重新排列您的元素:

Demo fiddle

$(document).ready(function ()) {
    var $boxes = $('.box');

    $(window).resize(function () {
        //Get the css width of our elements to determine the media query breakpoint we're in
        var boxesWidth = $('.box').width() / $(window).width() * 100;

        if (boxesWidth > 50) { //One box per row
            $boxes.each(function () {
                var $detail = $('#' + $(this).find('.detailLink').attr('name'));
                //Move the detail after each box
                $(this).after($detail);
            });
        } else if (boxesWidth > 34) {//Two box per row
            $boxes.filter(':odd').each(function () {
                var index = $boxes.index($(this));
                var $details = $('.detailWrapper').slice(index - 1, index + 1);
                //Move details after the last box in row
                $(this).after($details);

            });
        } else {//Three box per row
            //Find the last boxes in row
            $boxes.filter(function (i) {
                return (i + 1) % 3 == 0;
            }).each(function () {
                var index = $boxes.index($(this));
                var $details = $('.detailWrapper').slice(index - 2, index + 1);
                //Move details after the last box in row
                $(this).after($details);
            });
        }
    });
    //Trigger resize event on page load
    $(window).resize();
});