在列表元素中填充空格

Question

我有一個流體網格（高度和寬度）。 LI始終是矩形，並將它們自己調整爲屏幕大小。

現在我需要填寫名單，所以他們都有相同的高度。 如果所有列都有一個LI元素，這將很容易。 但是有兩個大小的列，其中一些可以包含大尺寸的LI。在某些情況下，柱子中間甚至有空的空間，因爲有一個很大的李，一個小的，然後又是一個大的。

在一些內容頁面上，所有的li都在一個列中。

在每一種情況下，李氏都向左漂浮。我做了一些圖片來解釋這個問題：

首先我想指望孩子的並加以比較。但是，當所有的LI都在一個列中，或者在列中間缺少LI時，它會變得複雜。

這是我曾嘗試：

var longest = 0 

$("ul.grid-col").each(function(){ 
    var liCount, $that = $(this); 
    liCount = $that.find("> li").length; 

    if ($that.is(".double")){ 
     if($that.find("li.big").length){ 
      var bigCount = $that.find("li.big").length 
      liCount = (liCount - bigCount) + (bigCount * 4) //because one big has the size of 4 small one 
     } 
    liCount = liCount/2 

    } 

    if (longest < liCount){ 
     longest = liCount 
    } 
}) 

現在我知道李的我需要多少來填補空虛的，它很容易填補起來。但是，我怎麼知道李的中間是否有空的空間？你將如何處理單列的特殊情況？

Answer 1

我得到了這個在FF工作。希望我能正確理解你的問題。我試圖通過構建一個html外殼來模擬你的情況。我不確定它是否與您的代碼相符，但我基於您的圖像。

我的方法的要點如下：

單柱UL的是相當容易的。遍歷所有的ul，看看最大高度是多少。按照li的高度劃分maxHeight，並根據需要添加li來填寫。

雙寬ul有點棘手。我創建了一個簡單的數組來表示構成雙寬列的單個空格。然後，我遍歷每個li並在適當的位置更新空間索引的狀態。如果在需要單個的情況下發生雙重現象，那麼我添加一個新的li。在雙ul的li陣列結束後，我再次檢查spaces數組以確保ul末尾沒有任何空白。

希望代碼比我的解釋更清晰一點。 :)

<style type="text/css">*    {margin:0; padding:0; list-style:none; border:none; outline:none;} 

    body   {} 

    ul    {float:left; display:inline; background:#efefef; position:relative;} 
    ul.single  {width:50px;} 
    ul.double  {width:100px;} 
    li    {float:left; display:inline; background:#dddddd; -moz-border-radius:10px;} 
    li.single  {height:50px; width:50px;} 
    li.double  {height:100px; width:100px; background:#999999;} 

    .added   {background:#990000 !important;} 
</style> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     var maxHeight = 0; 
     var maxWidth = 0; 

     // Update the ul to manually set height and widths. 
     $('ul').each(function(){ 
      var height = $(this).outerHeight(); 
      var width = $(this).outerWidth(); 

      $(this).css({ 
       'height': height, 
       'width': width 
      }); 

      if(height > maxHeight) {maxHeight = height;} 
      if(width > maxWidth){maxWidth = width;} 
     }); 

     var single = 50; 
     var double = 100; 

     // go over the li's and see if any spaces are empty. 
     $('ul').each(function(){ 
      if($(this).hasClass('single')){ 
       var totalSpaces = maxHeight/single; 
       var liCount = $(this).find('li').length; 

       for(var i = liCount; i<totalSpaces; i++){ 
        $(this).append('<li class="single added">&nbsp;</li>'); 
       } 
      } else { 
       // Abstract a two column grid. 
       var totalSpaces = maxHeight/single * 2; 

       // Set up an array representation of the spaces. 
       var spaces = []; 

       // Preset all spaces as empty. 
       for(var i=0; i<totalSpaces; i++){ 
        spaces.push(false); 
       } 

       var currentSpace = 0; 

       // Iterate over the li's and update spaces array. 
       $(this).find('li').each(function(index, ele){ 
        if($(ele).hasClass('single')){ 
         spaces[currentSpace] = true; 
         currentSpace++; 
        } else { 
         // Is this the right column? (is the currentSpace odd?) 
         if(currentSpace % 2 != 0){ 
          // Insert a single li. 
          $(ele).before('<li class="single added">&nbsp;</li>'); 
          spaces[currentSpace] = true; 
          currentSpace++; 
         } 
         for(var i=currentSpace; i<(currentSpace + 4); i++){ 
          spaces[i] = true; 
         } 
         currentSpace+=4; 
        } 
       }); 

       // finally, go back over the spaces array and fill in any missing li's from the end. 
       var me = $(this); 
       $(spaces).each(function(index, ele){ 
        if(!ele){ 
         // insert a single li at the end. 
         $(me).append('<li class="single added">&nbsp;</li>'); 
         spaces[index] = true; 
        } 
       }); 
      } 
     }); 
    }); 
</script> 

<ul class="single"> 
    <li class="single">&nbsp;</li> 
    <li class="single">&nbsp;</li> 
    <li class="single">&nbsp;</li> 
    <li class="single">&nbsp;</li> 
    <li class="single">&nbsp;</li> 
</ul> 

<ul class="single"> 
    <li class="single">&nbsp;</li> 
    <li class="single">&nbsp;</li> 
    <li class="single">&nbsp;</li> 
</ul> 

<ul class="double"> 
    <li class="double">&nbsp;</li> 
    <li class="single">&nbsp;</li> 
    <li class="double">&nbsp;</li> 
    <li class="single">&nbsp;</li> 
</ul> 

<ul class="single"> 
    <li class="single">&nbsp;</li> 
    <li class="single">&nbsp;</li> 
    <li class="single">&nbsp;</li> 
    <li class="single">&nbsp;</li> 
    <li class="single">&nbsp;</li> 
</ul> 

<ul class="single"> 
    <li class="single">&nbsp;</li> 
    <li class="single">&nbsp;</li> 
    <li class="single">&nbsp;</li> 
    <li class="single">&nbsp;</li> 
</ul> 

<ul class="double"> 
    <li class="single">&nbsp;</li> 
    <li class="double">&nbsp;</li> 
    <li class="double">&nbsp;</li> 
    <li class="single">&nbsp;</li> 
</ul> 

<ul class="single"> 
    <li class="single">&nbsp;</li> 
    <li class="single">&nbsp;</li> 
</ul> 

<ul class="double"> 
    <li class="single">&nbsp;</li> 
</ul> 

<ul class="double"> 
    <li class="double">&nbsp;</li> 
</ul> 

Answer 2

您是否嘗試過使用像960.gs這樣的CSS框架？它更容易，代碼將更加語義化。另外，使用JavaScript進行佈局是一個非常糟糕的主意。 JS代碼何時執行？如果將其添加到最後，則頁面看起來會變形，直到它加載，並且如果您在開始時加載它，那麼由於元素尚未加載，它將不起作用。

Answer 3

我很確定你不能。這是漂浮物的問題。技術上說，您正在從文檔流程中取出元素。你可以做的唯一的事情是在繪製之前計算出每個尺寸的每個尺寸有多少個li，找出它們將要繪製的位置，然後在可能存在空隙的位置添加空的。

然而，爲了這個工作，你將不得不找出一個出現間隙的模式，並且放心，它在所有瀏覽器中都不會相同！

其中一種方法是將所有li分成四個塊，以便如果有四個li可以創建一個新的ul，則將四個附加到它。如果它是一個大的李，保持這樣。例如：

 
<ul> 
    <li class="large"> 
    <ul> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
    </ul> 
    </li> 
    <li class="large"></li> 
    <li class="large"> 
    <ul> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
    </ul> 
    </li> 
</ul> 

如果你明白我的意思！