HTML：列の画像

Question

がどのように私はこの作業の例のようにHTML/CSSレイアウトを生成することができます：http://mythoughtswouldscareyou.tumblr.com/

私は基本的に、この一般的なレイアウトを複製します。私は<li>をfloat: left;という属性で試してみましたが、これはやり方ではないことは分かっています。

これを行うための効率的な方法の基本的な概要/説明だけで、私は多くの助けになります。

Answer 1

ああ、このためのツールがあります

http://masonry.desandro.com/index.html

石積みはjQueryのための動的なグリッドレイアウトプラグインです。 CSSフロートの裏側の と考えてください。浮動小数点は要素 を水平に、次に垂直に配置しますが、Masonryは要素を垂直に配置します。 グリッドの次の開いた場所に配置します。その結果、 は、異なる高さの要素間の垂直方向の隙間を最小限に抑えます。 と同じように、石を壁に取り付けます。

Answer 2

jQuery.masonryを使用してください。さまざまな高さの画像と束のfloat: left要素では、通常、あまりにもうまく整列していないブロックで終わります。このプラグインは、このような要素をインテリジェントに配置し、使用可能な領域を最大限に活用し、可能な限り多くのギャップをなくします。