3

幅が 4 単位、高さが任意の単位数のグリッド レイアウトで画像を表示しようとしています。

グリッド内の各画像は、1x1、1x2、2x1、または 2x2 単位の場合があります。また、jQuery masonry を使用して、レイアウトのギャップを解消しようとしています。

画像が表示されるサイズ (1x1、2x2 など) は、そのサイズに基づく「推奨」サイズです。

レイアウトのギャップを解消する最も簡単な方法は、特定の画像を優先サイズ以外のサイズでレイアウトに表示することだと思います。隙間のないレイアウトに必要であると判断された写真をオーバーライドしながら、優先サイズで表示される写真の最大数を維持しながら、これをアルゴリズム的に行うにはどうすればよいですか。

視覚的な例。私はこれを変えたい：

ここに画像の説明を入力

彼らがこのウェブサイトに持っているもののようなものに：http://500px.com/

4

2 に答える 2

0

最も簡単な方法は、1x2 のペアをグループ化し、2x1 のペアをグループ化し、1x1 の 4 倍をグループ化することです。多くの 2x2 を配置するのは簡単で、奇数の画像だけをサイズ変更する必要があります。これ (またはそれに似たもの) は、ほぼ間違いなく 500px.com が行っていることです。

このソリューションは、「左から右、上から下に配置」という制限に実際には合わないと思います。しかし、その制限が正確に何を意味するのかはわかりません。おそらく、それが何を意味するのかを明確にしていただければ、私たちはあなたをより良く助けることができるでしょう.

于 2012-07-01T04:59:59.987 に答える
0

はじめに: これは、一般的にNP 完全なビン パッキングの例だと思います(この pdfを参照)。それらの用語で物事を検索し始めるのに役立つかもしれません...これは決して完全な答えではありません.

于 2012-07-01T00:52:05.487 に答える