1

添付の画像に示すようにレイアウトを達成するのに苦労しています。

以下に示すように、さまざまな高さのボックスを左から右に 1,2,3...n の順に並べる必要があります。

右側にスペースがない場合、ボックスは左側の最初のボックスの下にドロップする必要があります。

また、ボックスを削除および追加できる必要があります。ボックスが取り外された場合、取り外されたボックスの下にある他のボックスが上にスライドするはずです。

それら、インラインブロック、jquery masonry をフロートしようとしましたが、うまくいきませんでした。

ボックスが非表示になると自動的にレイアウトを調整する設定が石工で見つかりませんでした。

アイデアが不足しているので、助けていただければ幸いです。 ここに画像の説明を入力

4

1 に答える 1

0

JavaScript がなければ、このようなレイアウトのクロスブラウザーを実現する方法はまだありません。css-columnsを試してみることもできますが、今のところこれはクロスブラウザーでは機能せず、他にもいくつかの問題があります。

幸いなことに、アイテムを削除して、石積みでレイアウトの変更をトリガーできます。

var container = document.querySelector('#remove-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;
  }
  // remove clicked element
  msnry.remove( event.target );
  // layout remaining item elements
  msnry.layout();
});

docs#remove を参照してください: http://masonry.desandro.com/methods.html

于 2013-11-12T02:11:27.020 に答える