在jquery响应式布局下显示当前div 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的宽度总是100％，所以它会填充一个完整的行。

上显示每行3个图像的桌面浏览器，它看起来像这样

<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的解决方案，以rearrage你的元素，每当窗口大小：

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