の上http://www.instagram.com/さまざまな高さの「ピン」、つまり <div> がありますが、それらはすべて、流れを中断する「ギャップ」や改行なしで非常にうまくレンダリングされているようです。CSS がどのように動作して実装されるかについて、わかりやすく説明されているでしょうか (CSS ファイルをただカーゴ カルトするのではなく、学んで理解したいと思っています)。よろしくお願いします。
ベストアンサー1
JQuery Masonry をチェックしてください。これは、必要なレイアウトを実現する最も簡単な方法です。http://masonry.desandro.com/
数か月前に Pinterest の JavaScript を読んで、自分でもこのことを理解しようとしました。簡単に言うと、CSS はまったく使用していません。ボックスやピンをすべて繰り返し処理して高さを計算し、その時点で最も高さが低い列の一番下にドロップすることで、ボックスやピンを動的に配置します (そのボックスの高さを加算します)。基本的に、トリックはなく、JavaScript だけです。