私は何かを探していますが、それが何と呼ばれているのか、また必要な情報がどこにあるのかわかりません。
http://ricklancee.com/jquery-layout
^ だから私が今得たのは、100% の幅 (現在のブラウザーの幅) のラッパーを持つ Web サイトです。この中に、固定 (240px) と float: left; ウィンドウを小さくすると、それらはお互いの下に配置されます。
彼らがお互いの下に浮いているとき、そして戻ってきたときに私が彼らに望んでいることは、その位置にアニメーション化されています.
http://masonry.desandro.com/は、ウィンドウのサイズを変更すると、要素が新しい位置にフロート/アニメーション化される例を示しています。
これがどのように行われるか、このテクニックが何と呼ばれるか、またはこれがどのように行われるかをどこで見つけることができるか教えてもらえますか?
プラグインを使用するかどうかはわかりません。教育目的で自分でスクリプトを作成するだけです。
どうもありがとうございました、
float を使用すると、ブラウザはそのようなことを処理します。
自分でやろうと思ったら面倒くさい。
div を絶対に配置する必要があります。position: absolute;- そして、親 div があることを確認してposition: relative;から、サイズ変更イベントを監視するリスナーを追加し、サイズ変更イベントが呼び出されたときに、div の新しい位置を計算します。
参照: http://api.jquery.com/resize/
実際にそれらを新しい家にアニメートするのは簡単です$(....).animate({top: xx, left: xx})。難しいのは、どこに行くべきかを計算することです。
確かに実行可能ですが。
resize イベント use をバインドする.one()と、一度だけ呼び出されます。次に、呼び出されたときに asetTimeout()を追加して、実際の計算を 1/2 秒遅らせます。そして、位置を計算してアニメーション化します。
アニメーションが終了したら、再度イベントをバインドします。その前にバインドしたくないか、同時に複数のアニメーションを実行することになります。(アニメーション化される複数の div があるため、すべてではなく、アニメーションの 1 つだけにバインドするようにしてください。)