17

幅と高さが固定された複数のdivがあります（記事の写真を含むある種のカタログビューについて考えてみてください）。ここで、float：leftの動作と同様にそれらを表示したいと思います。これにより、ブラウザウィンドウが大きくなるほど、1行に表示されるdivの数が増えます。

float：leftソリューションの欠点は、別のdivが収まるまで、右側に大きな白いギャップがあることです。これで、divを1ページに均等に分散する作業ができました。右側に大きな白いギャップがあるのではなく、単一のdiv間に均等に分散されたギャップがあるはずです。

JavaScriptの解決策は簡単です：http：//dl.dropbox.com/u/2719942/css/columns.html

ブラウザウィンドウのサイズを変更すると、float：leftと同様に動作しますが、スペースがボックス間で均等に分散されていることがわかります。列と行の数は、JavaScriptを使用して動的に計算されます。

  function updateLayout() {
    var boxes = document.getElementsByClassName('box');
    var boxWidth = boxes[0].clientWidth;
    var boxHeight = boxes[0].clientHeight;
    var parentWidth = boxes[0].parentElement.clientWidth;

    // Calculate how many boxes can fit into one row
    var columns = Math.floor(parentWidth / boxWidth);

    // Calculate the space to distribute the boxes evenly
    var space = (parentWidth - (boxWidth * columns)) / columns;

    // Now let's reorder the boxes to their new positions
    var col = 0;
    var row = 0;
    for (var i = 0; i < boxes.length; i++) {
      boxes[i].style.left = (col * (boxWidth + space)) + "px";
      boxes[i].style.top = (row * boxHeight) + "px";

      if (++col >= columns) {
        col = 0;
        row++;
      }
    }
  }

今、JavaScriptなしの解決策があるのだろうか？1ページに最大数百のdivが含まれる可能性があるため、CSSのみのソリューションをお勧めします。

CSS3フレキシブルボックスレイアウトを調べましたが、これは固定列レイアウトでのみ役立つようです。私の例では、列数は動的に計算されます。次に、 CSS3マルチカラムレイアウトを試しました。これは、同様の機能を得ることができましたが、divが垂直に配置され、内側が切り取られており、ブラウザのサポートはまだありません。これはテキストの方が便利なようですが、私の場合は、画像付きのdivを修正しました。これは、途切れてはいけません。

だから私の質問は：JavaScriptなしでこのようなことを実現できますか？

4

4 に答える 4

13

最も近い純粋なCSSソリューションはに基づいていtext-align: justifyます。

これがテクニックを示す私の答えの2つです：

HTML / CSSを使用したデモは次のとおりです。http：//jsfiddle.net/thirtydot/5CJ5e/（またはフルスクリーン）

他の行と比較してボックスの数が異なる場合、JavaScriptとこのCSSが最後の行を処理する方法に違いがあります。

JavaScriptはこれを行います：

私のCSSはこれを行います：

CSSが最後の行の異なる数のボックスで行うことを受け入れられない場合は、いくつかの非表示のボックスを追加して行を完成させることができます。

http://jsfiddle.net/thirtydot/5CJ5e/1/（またはフルスクリーン）

これを行うと、非表示のボックスが含まれている要素の高さを増やすという問題があります。これが問題である場合、私は少しのJavaScriptを使用せずにそれを修正する方法を考えることができません：

http://jsfiddle.net/thirtydot/5CJ5e/2/（またはフルスクリーン）

もちろん、JavaScriptが現在使用されているので、（HTMLを汚す代わりに）そもそもJavaScriptを使用して非表示のボックスを追加することもできます。

http://jsfiddle.net/thirtydot/5CJ5e/5/（またはフルスクリーン）

（以前のリビジョンでは、非表示のボックスのアイデアがもたらされる前に、これに対するより複雑なJavaScript修正も作成しました。今は、古い修正を使用する理由はないはずです。）

于 2012-05-11T11:41:37.567 に答える
5

これを行うには、Javascriptを使用する必要があります。

ただし、ボックスクラスを調整するだけで、すべてのボックスのマージンを一度に調整できます。

// Calculate how many boxes can fit into one row
var columns = Math.floor(parentWidth / boxWidth);

// Calculate the space to distribute the boxes evenly
var space = (parentWidth - (boxWidth * columns)) / columns;

$('.boxClass').css('margin', space / 2);

-

例： http： //jsfiddle.net/VLr45/1/

于 2012-05-11T09:12:38.570 に答える
2

おそらく石積みは配置を助けることができますか？

于 2012-05-11T09:41:29.700 に答える
1

だから私の質問は：JavaScriptなしでこのようなことを実現できますか？

私は最近同じ演習を行い、ついにJavaScriptをあきらめて使用しました。IE 7と8を放棄しても（これは実用的ではありません）、純粋なCSSソリューションを見つけることができませんでした。限られた方法でこれを達成するために、メディアクエリの長​​いリストを一緒にハックすることができると思います。

幅、高さ、比例スケーリング、最大幅、スクロール、一貫したマージン、パディングなどを処理する小さな（約1Kの縮小された）ライブラリを作成することになりました。

これが私自身のコードを使った大まかな例です：http：//jsfiddle.net/CmZju/2/。この例では、数百の要素を配置しました。

1ページに最大数百のdivが含まれる可能性があるため、CSSのみのソリューションをお勧めします。

ブラウザのレイアウトエンジンは、実行するのと同じ（または同様の）計算を実行する必要があります。確かに、それは高度に最適化されていますが、遅すぎると割り引く前に、いくつかの古いPCといくつかのモバイルデバイスでJSソリューションをテストします。

絶対測位を使用しているようです。私の非公式のテストでは、絶対レイアウトがフロート計算よりも大幅に高速であることが示されています。これは、特定の場所に特定の寸法で要素を描画するのではなく、比較的サイズが大きく浮いたアイテムを計算するためにブラウザが実行する必要のある作業について考える場合に意味があります。

パフォーマンスの最適化を実際に確認したい場合は、表示されているコンテンツのみを操作できます。これは、単にすべてのサイズを変更するよりもはるかに難しく、ページに数千のアイテムがある場合にのみ関連する可能性があります。

スクリプトルートを使用することになった場合は、jQueryMasonryで追加のアイデアを確認することをお勧めします。私はそれについて良いことを聞いたことがあり、それは私自身の図書館のためのいくつかの良いアイデアを与えてくれました。

于 2012-05-11T09:13:04.713 に答える