0

次のように、ボックスにコンテンツを表示する必要がある Web ページを作成しています。

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

画面サイズが異なるため、行数が異なる場合があります。たとえば、より多くの行を表示できる画面は次のように配置されます。

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

私が直面している問題は、DIVs を左にフロートさせると、次のように表示されることです。

[ 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);

したがって、 ifの場合、3 つの s のrowCount = 3各セットを でラップする必要があります。そしてもちろん、2 つだけ、または 1 つしか残っていない可能性があることを忘れないでください。.item<div class="column"></div>.item

これは非常に簡単に思えますが、どこから始めればよいかさえわかりません。これをもう少し調査して、何かわかったら、必ず質問を更新します。

.wrap()更新 1: jQueryの機能を使用できるようです。複数で使用する方法を理解する必要があります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)+')、1 つ大きい数値の葯を追加する必要があるようです。それを行うスクリプトの書き方がわかりませんが、私はまだ研究中です。3' torowCountを変更しただけでは、追加されたすべての div が適切に閉じられません。

4

3 に答える 3

2

まだコメントできないので、これを回答として投稿して申し訳ありません。

メディア クエリを使用したレスポンシブ Web デザインを検討する必要があります。ここにあなたが始めるための記事があります.

于 2013-01-01T21:44:06.837 に答える
2

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;
}

デモ: http://jsfiddle.net/MkGyu/1

于 2013-01-01T21:55:59.677 に答える
0 
if (jQuery and wantsColumns) {
   return [Masonry](http://masonry.desandro.com/demos/basic-multi-column.html);
}
于 2013-01-01T21:56:22.480 に答える