Dikdörtgen UI nesnelerini aralıksız olarak, soyut bir şekilde düzenleyin.

Question

Çeşitli koleksiyonlarda, çeşitli genişlik ve yükseklikte resimlerden oluşan bir koleksiyon, bunları ilginç bir şekilde soyut bir şekilde düzenleyerek nasıl programlanabilir? Yani ilginç tarafından

• bir kolaylıkla büyük boşluklar, ve ayırt satırlar veya sütunlar (negatif alan T gibi kesişme bir çok oluşturan) (aşağıdaki resme bkz). Benim özel durum için

, tüm görüntüler (150p 450px tarafından 150px veya 378px olabilir) yüksekliği ortalama VEYA genişliği 150 piksel bir maksimum olabilir 150p bir dizi maksimum boyuta sahiptir.

klasik bir programlama meydan okuma olabilir ama Google'a sert konuyu bulma gibiyim Bu görünüyor ...

DÜZENLEME: genel düzenlemenin nasıl olması gerektiğine ilişkin herhangi bir kısıtlama olmadığı göstermek için resim Değişti (

Answer 1

Sizin sorununuz: NP-Hard.

This thread, bir tür nXm dikdörtgenle bile, bir çözüm olup olmadığını bulmak için NP-Zor olduğunu gösterir, böylece daha genel sorununuz elbette NP-Sertdir [Tek bir dikdörtgen şeklidir. ancak genellikle olmayan bir optimum sonuç bulacaksınız - sen sonra çözüm veya daha hızlı olacaktır genetic algorithms ya hill climbing gibi bir sezgisel bir yaklaşım, optimize eğer bir backtracking çözümü deneyebilirsiniz

bu sorunun özel durum]. Eğer jquery eklentisi karşı değilseniz

Answer 2

, bu kontrol edebilirsiniz - (muhtemelen en karmaşık çözüm olmasa da) ben buna benzer bir şey inşa ettik http://masonry.desandro.com/

Answer 3

. Benim yaklaşımım, tuval üzerine yerleştirdiğim dikdörtgenleri düzenlemek için quadtree kullanmaktı. Sonra temelde bir sarmalda merkez noktasını gezdim, yeni dikdörtgenler yerleştirmeye ve çarpışmaları algılamak için quadtree'yi kullanmaya başladım. Bir çarpışma tespit ettiysem, dikdörtgenin kenarına yerleştirmeye çalıştığım dikdörtgeni merkezden en uzak olanla çarpıştıracağım ve çarpışma kontrol sürecini tekrarlayacağım. Yine, muhtemelen en karmaşık yöntem değildir ve dikdörtgenler arasında daha büyük boşluklar bırakma eğilimi gösterir (aralarındaki sınırlar tekdüze değildir), ama benim zevkime göre iyi sonuçlar vermiştir.