0

昨日、Saatchi & Saatchi の Web サイトにたどり着きました。記事のレイアウトが一見ランダムな幅を使用しており、小さなウィンドウ サイズでも適切にサイズ変更されるのが気に入っています。

http://saatchi.com/en-us/

ソースコードを調べてみると、Small、Medium、Large のいずれかのクラスを設定しているようです。これらのクラスには特定の幅がありますが、各行を埋める JS アルゴリズムがあります。私の主な質問は、それらが列に収まるようにするにはどうすればよいか、または大きなサイズが多すぎないようにすることです。小、中、大のサイズはバックエンドで入力されているようですが、新しい投稿が表示されるとプッシュダウンされるため、ソリューションはバックエンドで適切なサイズを選択して適合することを確認できません.

コンテナーの幅は 1356px です。サイズに関する限り、私が思いついたのは次のとおりです。

&.small{

    width: 208px;//235 -- difference of 27
}

&.medium{

    width: 317px;//344 -- difference of 27
}

&.large{

    width: 426px;//454 -- difference of 28
}

コメント内の値は JS によって設定されているものであり、一部の項目にのみ設定されています。どういうわけか、一部の div に 27 または 28 ピクセルを追加して、すべてを適合させます。ロジックがどのように機能するかについて誰か考えがありますか? 27の意味は何ですか.

4

1 に答える 1

0

A greedy algorithm would be to sort the items by witdth first and put the first item in the first row where it fits and loop through the next items. When there is no row left you can add more row as you loop through the list. You can look for 1d bin-packing algorithm.

于 2013-09-22T21:27:23.610 に答える