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将不再显示在第一行的下方，而是显示在第二行的下方。

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

关于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();
});

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

1 个答案: