Etiket bulutu farklı bir tür Tasarımı

3 Cevap php

Aksine, tüm farklı boyutları vardır bağlantıları bir grup olan daha, benim tüm etiketler aynı boyutta olmasını istiyorum. Ancak, benim hedef aka kullanılan hatların sayısını en aza indirerek, bulut yapmak için gerekli alan miktarını en aza indirmektir.

Bu örneği ele alalım:

example

Herhangi normal bir etiket bulutu gibi görünüyor. Ancak, etkili bulutundan fazladan bir satır ortadan kaldırabilir aşağı altındaki 'taş' gibi diğer etiketleri tarafından doldurulan olabilir 'roughdiamond' etiketi, çevresindeki tüm bu ekstra alanı bakmak.

Nasıl yeni bir satır başlamadan önce üstlerindeki ne olursa olsun uzay mümkün doldurmak için kelime alma hakkında gitmek istiyorsunuz? Ben gerekli hatların minimum numarasını bulmak için onları yeniden organize bahsetmiyorum. Line 1 dolu olduğundan ben görüntüde listede geçiyor ise, 'kolye', 'Hovlit' ve 'igrice' o kadar dolum 1 hattına gitmek istiyorum, 'roughdiamond' Hat 2'ye gitmek istiyorum, 'turmalin' olur o emberald 'ile aynı hatlarda 1 ya da 2, sığamaz çünkü hattına 3 gitmek, ancak fazladan bir boşluk var çünkü orada uygun çünkü' inci 'Hat 2'ye gitmek istiyorum. Herhalde sadece linkler için sığabilecek herhangi doldurulabilir uzaya çökmesine neden olur CSS bunu yapmanın bir yolu var olacağını düşündüm.

3 Cevap

Ben bu optimum kelimeleri yeniden düzenlemek için özel hesaplamalar gerektirir beri bu CSS mümkün olduğunu sanmıyorum.

Aslında mücadele arıyoruz sorun eşit büyüklüğü ve değişken boyutu öğelerin bidonları ile 2 boyutlu bin packing sorundur.

Büyük gelen küçük için öğeleri sıralama ve sonra büyük olanlar arasında küçük kelime uydurma, bin ambalaj ile ilgili bir soruya this answer belirtildiği gibi genellikle oldukça iyi bir yaklaşım neden olur. Eğer (onun yaklaşım bulutun altındaki gruplanmış birçok küçük deyişle neden olabilir) bu sizin için çalışacak olup olmadığını öğrenmek için kullanıyor olacak kelimelerin türleri ile denemek zorunda kalacak.

Bu optimal bir çözüm değil ama muhtemelen (çoğu zaman) rastgele bir yol daha iyi ve uygun bir yol daha hızlı olacak: sipariş azalan display each tag by string length genişliği.

Bu size optimal çözüm% 14 daha kötü max, olacak bir düzenleme verecektir.

EDIT: Ayrıca artan sırayla strlen genişliğinde etiketler sıralamak çalışır.

Onları her yerde yüzen sonra, metnin tam yüksekliği olan bir div koyarak deneyebilirsiniz?

etiketler