在類似谷歌的縮略圖預覽中查找每行的項目數

Question

我正在製作一個縮略圖網格，其中包含像「Google圖片」這樣的擴展預覽。這個想法是獲得點擊項目索引，點擊項目行號和擴展容器將被插入的項目。

的問題是，當我點擊任何項目首次一切如預期，但是當我點擊同一元素再次先前值加倍，重新調整大小容器重複切換上下時，同樣的事情發生。

DEMO

這裏是我的代碼：

HTML

<div class="container"> 
    <ul> 
     <li> 
      <a href=""></a> 
     </li> 
     <li> 
      <a href=""></a> 
     </li> 
     <li> 
      <a href=""></a> 
     </li> 
     <li> 
      <a href=""></a> 
     </li> 
     <li> 
      <a href=""></a> 
     </li> 
     <li> 
      <a href=""></a> 
     </li> 
     <li> 
      <a href=""></a> 
     </li> 
     <li> 
      <a href=""></a> 
     </li> 
     <div id="project-wrapper"></div> 
    </ul> 
</div> 

CSS

* { 
     margin: 0; 
     padding: 0; 
} 

*, *:before, *:after { 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 


    ul { 
     list-style: none; 
     position: relative; 
     margin: 0; 
     padding: 0; 
     font-size: 0; 
    } 

    .container { 
     max-width: 1200px; 
     margin: 0 auto; 
    } 



    ul li { 
     display: inline-block; 
     width: 25%; 
     vertical-align: middle; 
     overflow: hidden; 
     font-size: 0; 
     border-bottom: 1px solid #000; 
    } 

    @media only screen and (max-width: 959px) { ul li { width: 33.333333333333%; } } 

    @media only screen and (max-width: 800px) { ul li { width: 50%; } } 

    @media only screen and (max-width: 500px) { ul li { width: 100%; } } 

    ul li + li { border-left: 1px solid #000; } 

    ul li a { 
     display: block; 
     width: 100%; 
     height: 200px; 
     background-color: #999; 
    } 

    ul li div { 
     position: absolute; 
     top: auto; 
     left: 0; 
     height: 500px; 
     background-color: #666; 
     width: 100%; 
    } 

    #project-wrapper { 
     height: 200px; 
     width: 100%; 
     background-color: #000; 
     display: none; 
    } 

個

JS

var list  = $('ul'), 
    listItems = $('ul li'), 
    projectWrapper = $('#project-wrapper'); 

    totalItems = $('ul li').length; 


var gridInfo = function(){ 

    var itemsPerRow = 0, 
     rowsNumber = 0, 
     lastRowItems = 0; 

    listItems.each(function(){ 
     var $self = $(this); 

     if ($self.prev('li').length > 0) { 
      if($self.position().top != $self.prev('li').position().top) return false; 
      itemsPerRow++; 
     } else { 
      itemsPerRow++; 
     } 
    }) 

    lastRowItems = totalItems % itemsPerRow; 
    rowsNumber = (lastRowItems != 0) ? ((totalItems - lastRowItems)/itemsPerRow) + 1 : ((totalItems - lastRowItems)/itemsPerRow) ; 

    return { 
     itemsPerRow : itemsPerRow, 
     rowsNumber : rowsNumber 
    } 
} 


$(window).on("debouncedresize", function(event) { 

    if (listItems.hasClass('active')) { 
     var activeItem = $('li.active'), 
      currentItemIndex = listItems.index(activeItem) + 1, 
      targetRow = Math.ceil(currentItemIndex/gridInfo().itemsPerRow), 
      targetItem = (targetRow != gridInfo().rowsNumber ) ? (targetRow * gridInfo().itemsPerRow) -1 : listItems.index(listItems.last()); 

     projectWrapper.insertAfter(list.find('li:eq(' + targetItem + ')')); 
    } 

}); 

listItems.click(function(e){ 
    e.preventDefault() 
    var $self = $(this); 
    listItems.removeClass('active'); 
    $self.addClass('active'); 

    var currentItemIndex = listItems.index($self) + 1, 
     targetRow = Math.ceil(currentItemIndex/gridInfo().itemsPerRow), 
     targetItem = (targetRow != gridInfo().rowsNumber ) ? (targetRow * gridInfo().itemsPerRow) -1 : listItems.index(listItems.last()); 

     projectWrapper.show().insertAfter(list.find('li:eq(' + targetItem + ')')); 
}) 

Answer 1

您需要重新定位每次點擊您的projectWrapper。可能會將其移至最後位置，然後嘗試將其放置在其計算的位置。

同樣在你的點擊事件中調用gridInfo一次，並將值存儲在某個變量中，而不是進行4次獨立調用。