0

我有一个图像库的响应式布局，它将根据用户的屏幕宽度每行显示 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 上的第一个问题 - 希望我做对了。

4

1 回答 1

1

每当调整窗口大小时，您都需要一个 javascript 解决方案来重新排列您的元素：

演示小提琴

$(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();
});
于 2013-08-25T10:11:32.563 回答