Görüntülerin farklı yüksekliklere sahip olduğu bir kolajı (boşluk içermeyen bir ızgara) dinamik olarak nasıl oluştururum?

Küçük resimlerin bir sayfasını görüntülemek istiyorum. Küçük resimler, kullanıcı tarafından yüklenen resimlerdir. Her görüntü kısıtlı bir genişliğe sahiptir, ancak kısıtlı bir yükseklik değil, bu, tam görüntüyü herhangi bir kırpma olmadan göstermek içindir.Görüntülerin farklı yüksekliklere sahip olduğu bir kolajı (boşluk içermeyen bir ızgara) dinamik olarak nasıl oluştururum?

Ben görüntüleri arasında hiç boşluk bırakmadan birbirlerine karşı popo istiyorum. Sütun sayısı sabit değil: Sayfayı genişletir veya yeniden boyutlandırırsam görüntüler doğru sayıda sütuna akar. Ne istiyorsam, ALMOST'tur. Dışında ben bu boşluklu görünümü elde sayfasında boylu görüntüleri varken:

enter image description here

nasıl boşlukları ortadan kaldırmak mı?

kaynak

2011-06-30 Homan

Sen arka arkaya 4 ayrı tablolar (tek sütun ile her) tanımlayabilir :) –

istediğiniz görünümü elde etmek için, mutlak konumlandırmayı kullanmak zorunda olacak. Kendi senaryonuzu yazabilir veya önerilen bir eklentiyi kullanabilirsiniz. – jchavannes

Eğer css sadece her sütun için bölüm oluşturacağız ve bu sütunları yüzer zorunda bunu yapmak istiyor (ama görüntülerin sırasını karıştıran biridir) ise.

Alternatif olarak, this one gibi jquery eklentisi kullanabilirsiniz.

kaynak

2011-06-30 21:18:06 Litek

teşekkürler. Duvar eklentisi istediğimi yapar. Bunun dışında her sıranın soldan sağa gitmek için asıl düzeni tercih ederdim. Masonluk bunu ilk sıra için yapar, ancak 2. sıra için, bir sonraki imajı, bulabildiği en büyük boşluğa sıraya sığdırır. Her ne kadar genel olarak, ilk önce "üstte" olmak üzere, ancak zorunlu olarak soldan sağa doğru olmak için emir alırsınız. – Homan

Görüntülerin dağılmasını önlemek için bir olasılık bir sayaç veriyor, her dördüncü görüntü için onu belirli div'a gönderiyorsunuz. Yani bu sayaç ve 1,2,3 ve 4 gidiş bir süre deyimini .... numara 1 çarptığında, sen 1 div eklemek ve benzeri, ve 4 çarptığında, sadece numarayı tekrar eklemek zorunda 0 :) Sorun çözüldü! –

değil CSS ihtiyaç nasıl zarif emin değilim, ama iyi bir seçenek yok daha az. Buna yardımcı olmak için masonry.js'yi kullanabilirsiniz.

http://css-tricks.com/seamless-responsive-photo-grid/

kaynak

2012-02-25 13:20:48 onefastsnail

Bu seçilen cevap olmalı! – vsync

Sana süre önce bu a cevap verdi biliyorum, ama hiç bir görüntü görüntüleme yolu alta doğru yerine üst sol anladın? – SISYN

Görüntülerin farklı yüksekliklere sahip olduğu bir kolajı (boşluk içermeyen bir ızgara) dinamik olarak nasıl oluştururum?

cevap

İlgili konular