Vanilla Masonry ( http://vanilla-masonry.desandro.com ) を使用して、jean-georges.com に似た写真のモザイクを作成しています。
基本的に列を追加する必要があります。箱から出してすぐの CSS には、流動的な幅 16%、36%、56% の 3 つの列しかなく、コンテンツの周りに 2% のパディング/マージンがあると思います。ガターやパディングは不要で、16 列が必要なので、css を 6.25%、12.5%、18.75%、25%、31.25%、37.5% に変更しました。2、3、4、または 6 列にまたがるコンテンツが必要であるため、列がすべて同じサイズではないことを思い出してください。画像を正しい縦横比とサイズに変更して連携させ、columnWidth 関数を使用してコンテナー/16 を返し、列をそのサイズに設定しています。
正しく動作していないようで、col6 の長方形の多くが col4 にサイズ変更されています。何が起こっているのかわかりません。ウィンドウのサイズを変更すると、写真のサイズが自動的に変更されますが、相互に関連するサイズが保持されていません.. dpiの問題かもしれません.今日の午後、グラフィックをやり直しています.アスペクト比に基づいて機能し、スパンする列の数を伝える必要があります。
編集:非常に特定のブラウザウィンドウサイズで動作するようになりました.開発者ツールのサイズを変更し、それを一緒に押し上げました. パーセンテージのパディング/マージンが追加されているかどうか疑問に思っていますが、何も見つかりません! 別の可能性として、コンテナの高さが影響している可能性があります。
