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