css - 複数列のコンテンツを操作するレスポンシブデザイン

Question

画面/デバイスの幅に応じて、1 列または 2 列の UI を実装したいと考えています。私はAjaxを使用してこれらの2つの列にデータをロードし、それらのアイテムの高さに応じて追加しているので、両方の列は約です。同じ量の垂直スペース。

ユーザーがブラウザーウィンドウのサイズを常に同じに保っていれば、すべて問題ありません。最初の読み込みで 1 列または 2 列がいっぱいになるからです。しかし、ユーザーがウィンドウのサイズを変更すると問題が発生し、それに応じてすべてのコンテンツを統合する必要があります。

Javascript を使用してこれを行うことができますが、CSS のみで同じことができるかどうか疑問に思っていました。

この例は、コンテンツの幅に応じて 1..3 列で動作する Google+ です。

score 0 · Accepted Answer

独自の解決策を思いついた

CSSのみでも可能ですが、無理かもしれません

リソース消費の観点から実行可能です。ページに項目を追加するときは、必ず列 1 にすべての項目を配置し、列 2 に配置する項目に追加の CSS クラスを追加します。

レスポンシブメディアクエリは、次のいずれかになります。

これが、ユーザーがブラウザウィンドウのサイズを変更したときに Javascript の処理を回避する唯一の方法です。

この機能に存在する唯一の問題は、多数のアイテムを表示する場合です。これは、DOM のノードが平均で 50% 増えるため、それらのアイテムの約半分がページ全体で複製されるためです (ただし、これらの複製の 1 つのコピーのみがページ全体で複製されます)。同時に表示されます）。