計數的DIV，添加包裝用jQuery

我正在寫一個網頁，需要框來顯示內容，就像這樣：計數的DIV，添加包裝用jQuery

[ 1 ] [ 3 ] [ 5 ] 
[ 2 ] [ 4 ] [ 6 ]

因爲不同的屏幕尺寸，有時行的數量會有所不同。例如，一個屏幕，使更多的行顯示將安排如下：

[ 1 ] [ 4 ] 
[ 2 ] [ 5 ] 
[ 3 ] [ 6 ]

我運行中的問題是，當我靜靜地飄浮在DIV s到左側，它們顯示了像這樣：

[ 1 ] [ 2 ] [ 3 ] 
[ 4 ] [ 5 ] [ 6 ]

我打算解決這個問題是將每列包裝在一個div中，然後將其浮到左邊。但是因爲根據屏幕大小可能會有不同數量的行，所以我需要用jQuery來完成。

我已經計算了jQuery的行數，我只是無法弄清楚如何在包裝中包裝一定數量的div。這裏是我的腳本至今：

var pageHeight = $("body").innerHeight() - 157; // 157 being the height of the page title 
var rowCount = Math.floor(pageHeight/295); // 295 being the height of each item 
var itemCount = $("#itemWrapper").children(".item").length;each item 
$("#itemWrapper").height(pageHeight);

所以，如果rowCount = 3，然後我需要每個組三個.item S上的包裹中<div class="column"></div>。當然，請記住，可能只剩下兩個或一個.item。

這似乎很簡單，但我甚至無法找到從哪裏開始。隨着我對此進行更多研究，如果我想出任何東西，我一定會更新我的問題。

更新1：看起來我可能會使用jQuery的.wrap()函數。我只需要弄清楚如何在多個DIV上使用它。

更新2：我發現這段代碼，看起來很有希望，但我無法弄清楚如何使它基於行的數量變化：

for (var i = 0;i < itemCount;i+=3) { 
    $(".item").filter(':eq('+i+'),:eq('+(i+1)+'),:eq('+(i+2)+')').wrapAll('<div class="column" />'); 
};

好像每增加div，它需要添加更高一個數字的花葯:eq('+(i+1)+')。不知道如何編寫腳本，但我仍在研究。如果我只是更改3' to rowCount`它不會正確關閉所有添加的div。

來源

2013-01-01 JacobTheDev

如果你不介意的跨瀏覽器的問題，使用垂直Flexbox的：HTTP ：//jsfiddle.net/HJr3H/。 – pimvdb

需要在IE10中工作（這將適用於Windows 8 HTML5應用程序），並且在Chrome中看起來不能正常工作（它全部出現在一列中）。 – JacobTheDev

你知道嗎，如果你想知道它，那麼就沒有等於自堆積列的行爲的「真實」結構。 –

對於支持它們的瀏覽器，您可以使用CSS3列屬性。

這是一個將跨瀏覽器工作的列封裝腳本。我用基於列的列級CSS規則數百分比

var colCount = 3,/* hard coded for demo, use your calcs for dynamic*/ 
    $items = $('.item'), 
    items_per_col = Math.ceil($items.length/colCount), 
    start = 0; 

for (i = 0; i < colCount; i++) { 
    var endSlice = start + items_per_col; 
    $items.slice(start, endSlice).wrapAll('<div class="col' + colCount + '">'); 
    start += items_per_col; 
}

DEMO設置寬度：http://jsfiddle.net/MkGyu/1

來源

2013-01-01 21:55:59 charlietfl

完美！我不得不稍微調整一下，以適應我目前的代碼，但是這正如我想象的那樣工作。謝謝！ – JacobTheDev

哎呀，我[有一個CSS anwwer參考]（http://stackoverflow.com/questions/7617418/how-is-a-css-display-table-column-supposed-to-work），但把我的錢在砌體。好吧。 –

@JaredFarrish砌體的很酷，但可能矯枉過正的這幾行，也可以很快適應調整大小處理程序 – charlietfl

我還不能評論，所以很抱歉發佈這個答案。

您應該真正關注使用媒體查詢的響應式網頁設計。 Here's an article讓你開始。

來源

2013-01-01 21:44:06

if (jQuery and wantsColumns) { 
    return [Masonry](http://masonry.desandro.com/demos/basic-multi-column.html); 
}

來源

2013-01-01 21:56:22

這看起來很有趣，但看起來我仍然需要用jQuery來計算div的數量以適當調整大小，所以它不回答問題。 – JacobTheDev

你還是要算什麼？看看周圍，有各種瘋狂的東西。 –

計數的DIV，添加包裝用jQuery

回答

相關問題