1

Pinterest のようなスタイルのページを作成したいのですが、各ブロックの高さが変わる可能性があり、その列だけを再配置したいと考えています。

たとえば、ページが読み込まれると、レイアウトは次のようになります。

------------------------------------
|         |                |       |
|         |                |       |
|---------|                |       |
|Hello! I |                |       |
|am Alice.|----------------|       |
|---------|                |       |
|WoW!     |                |       |

ユーザーが 1 つのブロックをクリックすると、高さが変化し、理想的には次のようになります。

------------------------------------
|         |                |       |
|         |                |       |
|---------|                |       |
|Hello! I |                |       |
|am Alice.|----------------|       |
|Who are  |                |       |
|you?     |                |       |
|---------|                |       |
|WoW!     |                |       |

MasonryとShapeShiftを試してみましたが、どちらも同様に機能します。デフォルトでは、一部のブロックの高さが変化しても、すべてのブロックの位置は変化しません。そのWho are you?ため、下WoW!になり、まだ次のようになります。

------------------------------------
|         |                |       |
|         |                |       |
|---------|                |       |
|Hello! I |                |       |
|am Alice.|----------------|       |
|---------|                |       |
|WoW!     |                |       |

それらを再配置する関数を手動で呼び出すことができます (例: $('.container').trigger("ss-rearrange");ShapeShift の場合) が、ブロックが別の列に配置される可能性があり、これは理想的ではありません。

ライブラリがあるかどうか、またはこれをどのように達成すればよいか知りたいですか? 高さが変わると、ブロックは現在の列でのみ移動する必要があります。

4

1 に答える 1

0

(1) masonry のドキュメントを参照してください。

var container = document.querySelector('#layout-demo .masonry');
var msnry = new Masonry( container, {
  columnWidth: 60
});

eventie.bind( container, 'click', function( event ) {
  // don't proceed if item was not clicked on
  if ( !classie.has( event.target, 'item' ) ) {
    return;
  }
  // change size of item via class
  classie.toggle( event.target, 'gigante' );
  // trigger layout
  msnry.layout();
});

msnry.layout()はあなたがやりたいことです。

ソース: http://masonry.desandro.com/methods.html

codepen を参照してください: http://codepen.io/johannesjo/pen/kFixz

(2) css-columnsを試すこともできます: http://www.webdesignerdepot.com/2013/03/how-to-use-css3-columns/

(3) masonry や css-columns のように列を変更したくない場合は、単純なフローティング コンテナーを使用できるはずです。ただし、コンテンツを自分でソートする必要があります。あなたの場合、他のすべての方法は要素のサイズに基づいて要素の位置を再評価することが期待されるため、これが最適なソリューションである可能性があります。

(4)要素の重なりが気にならない場合は、内部の非表示の div を切り替えて組積造セルを使用できます (表示: なし)。layout() を呼び出さないと、質問で説明したように、要素はその位置を維持します。

于 2013-11-12T01:51:00.643 に答える