您可以簡化和推廣這個有用的jQuery函數嗎？

我正在做一個網上商店，商品在平鋪中顯示爲「網格」。我只是想使用各種大小的瓷磚，並確保（通過jQuery）沒有空閒空間。您可以簡化和推廣這個有用的jQuery函數嗎？

在基本的情況下，我有一個960px的包裝，並希望使用240x180px（class .grid_4）瓷磚和480x360px（class .grid_8）瓷磚。請查看圖片（想象無邊距/墊襯有）：

alt text http://img580.imageshack.us/img580/2828/screenshot2010041508h52.png

問題沒有jQuery的：

在CMS提供了大瓦爲第6，就不會有下的第5一個自由空間
在CMS提供了大瓦爲第7，就不會有下第五和第六自由空間
在CMS提供了大瓦爲第8，這將轉移到下一行，留下位置8號免費

我的解決方法到目前爲止是這樣的：

$(".grid_8").each(function(){ 
     //console.log("BIG on position "+($(this).index()+1)+" which is "+(($(this).index()+1)%2?"ODD":"EVEN")); 

     switch (($(this).index()+1)%4) { 

      case 1: 
       // nothing needed 
       //console.log("case 1"); 
       break; 

      case 2: 
       //need to shift one position and wrap into 240px div 
       //console.log("case 2"); 
       $(this).insertAfter($(this).next()); //swaps this with next 
       $(this).prevAll(":nth(0), :nth(1)").wrapAll("<div class=\"grid_4\" />"); 

       break; 

      case 3: 
       //need to shift two positions and wrap into 480px div 
       //console.log("case 3"); 
       $(this).prevAll(":nth(0), :nth(1)").wrapAll("<div class=\"grid_4\" />"); //wraps previous two - forcing them into column 
       $(this).nextAll(":nth(0), :nth(1)").wrapAll("<div class=\"grid_4\" />"); //wraps next two - forcing them into column 
       $(this).insertAfter($(this).next()); //moves behind the second column 
       break; 

      case 0: 
       //need to shift one position 
       //console.log("case 4"); 
       $(this).insertAfter($(this).next()); 
       //console.log("shifted to next line"); 
       break; 

     } 

    });

應該從它是如何工作的意見明顯 - 通常總是可以確保大瓦是奇姿的小瓷磚前的（數甚至）通過將一個位置移回需要的位置。另一個小塊左邊的小塊也需要包裹在另一個div中，以便它們出現在列中而不是行中。

現在最後的問題：

如何推廣的功能，這樣我可以使用更多的瓷磚尺寸像720x360（3×2），480x540（2×3），等等？
有沒有簡化功能的方法？
當檢查實際位置時，我需要確保大瓦片數量爲小瓦片的倍數。由於在位置12上的瓦片（第三行中的最後一個瓦片）上使用index（）現在將返回7（位置8），因爲位置5和9上的瓦片被一起包裝在一列中，而大瓦片也只是單個div，但跨越2個2個職位。任何干淨的方式來確保這一點？

非常感謝您的任何提示。隨意重複使用代碼，我認爲它可以是有用的。

約瑟夫

來源

2010-04-15 Josef Richter

聽起來像是你需要使用jQuery插件叫磚石。

你可以找到它here

來源

2010-04-15 07:25:45 AutomatedTester

看起來很棒！我現在要爲此找到一個用途，哈哈。 – 2010-04-15 07:29:53

哇！正在尋找類似的東西無濟於事。顯然需要提高我的谷歌搜索技能。非常感謝！ – 2010-04-15 07:46:49

仍然可能有助於瞭解上述問題的答案 – 2010-04-15 07:53:17

難道這簡化夠嗎？

$(".grid_8") 
.each(function() { 
switch (($(this) 
    .index() + 1) % 4) { 
    case 1: 
     break; 
    case 2: 
     $(this) 
      .insertAfter($(this) 
      .next()), $(this) 
      .prevAll(":nth(0), :nth(1)") 
      .wrapAll('<div class="grid_4" />'); 
     break; 
    case 3: 
     $(this) 
      .prevAll(":nth(0), :nth(1)") 
      .wrapAll('<div class="grid_4" />'), $(this) 
      .nextAll(":nth(0), :nth(1)") 
      .wrapAll('<div class="grid_4" />'), $(this) 
      .insertAfter($(this) 
      .next()); 
     break; 
    case 0: 
     $(this) 
      .insertAfter($(this) 
      .next()) 
} 
})

來源

2012-11-09 01:05:56

您可以簡化和推廣這個有用的jQuery函數嗎？

回答

相關問題