pinterest.com'un mutlak div yığın düzeni nasıl çoğaltılır [kapalı]

104

Pinterest.com'un div düzenini, özellikle de sütun sayısının tarayıcının yeniden boyutlandırılmasına daha fazla / daha az uyacak şekilde nasıl ayarlandığını ve dikey yığınlamanın bitişik sütun yüksekliklerine bağlı olmadığını kopyalamak istiyorum. Kaynak kodu, her div'in mutlak konum olduğunu gösterir. Bir kurucu ortak, özel jQuery ve CSS ile yapıldığını belirten bir Quora gönderisine cevap verdi. Sonuçların soldan sağa sıralanmasını istiyorum. Bunu kendim yapmak için sağlayabileceğiniz herhangi bir yön çok takdir edilecektir.

jquery  css  layout 
— Chrickso
kaynak
Kendi kodumu basit Jquery ve CSS ile kodladım. Bunun yeniden boyutlandırmada değişmesini istiyorsanız, sadece bir fonksiyona sarın ve konteyner elemanında yeniden boyutlandırmayı izleyin jsfiddle.net/92gxyugb/1
— Andrew WC Brown

Yanıtlar:

183

Pinterest senaryosunu yazdım. Kimliklerin düzen ile ilgisi yoktur ve etkileşimle ilgili diğer JS için kullanılır. İşte nasıl çalıştığının temeli:

Önceden:

  • Pimli kapları kesinlikle yerleştirin
  • Sütun genişliğini belirle
  • Sütunlar arasındaki kenar boşluğunu belirleyin (cilt payı)

Bir dizi kurun:

  • Üst kabın genişliğini alın; sığacak sütun sayısını hesapla
  • Sütun sayısına eşit uzunlukta boş bir dizi oluşturun. Düzeni oluştururken her bir sütunun yüksekliğini depolamak için bu diziyi kullanın, örneğin 1. sütunun yüksekliği dizi [0] olarak saklanır

Her pim üzerinden döngü yapın:

  • Her bir pimi eklendiği anda en kısa sütuna yerleştirin
  • "left:" === sütun # (dizin dizisi) çarpı sütun genişliği + kenar boşluğu
  • "top:" === O sıradaki en kısa sütunun dizisindeki (yükseklik) değeri
  • Son olarak, pimin yüksekliğini sütun yüksekliğine ekleyin (dizi değeri)

Sonuç hafiftir. Chrome'da, 50'den fazla iğneden oluşan bir tam sayfa yerleştirmek <10 ms sürer.

— Evan Sharp
kaynak
4
Sütunun yüksekliğini hesaplamayı nasıl kastediyorsunuz? İçindeki öğelerin sayısını ve yüksekliğini bilmiyorsanız ne kadar yüksek olması gerektiğini nasıl anlarsınız? Göstermek için bazı sözde kodların yerleşimini yapma şansınız var mı?
— Michael Giovanni Pumo
22
işte sağlam bir eğitim - benholland.me/javascript/…
— hollandben
1
Anonim bir kullanıcıdan geri bildirim (düzenleme kuyruğunda bulunur): İlginç bir şekilde jQuery'de tam olarak aynı komut dosyasını yaptım, aslında 1 satır ve N sütunlu bir tablo oluşturmaktan ve onları soldan sağa en kısa sütuna eklemek arasındaki küçük farkla. öncelik. Soldan sağa konumlandırırken bir sütunu gerçekten atlamak için gereken "Minimum yükseklik farkı" sabitini de eklesem de, bu, düzene, yükseklikleri olabildiğince eşit hale getirmeden kronolojik olarak sezgisel bir görüntü sağlıyor
— 2012'de
1
@MichaelGiovanniPumo Yüksekliğin düzenden önce bilinmesi gerektiğini düşünüyorum (Pinterest olması durumunda), div'ların birbiriyle örtüştüğü bir "başlangıç" durumuna sahip değiller. Yükseklik bilinmiyorsa bu yapılamaz.
— ptgamr
1
@ hollandben'in bağlantısı kesildi, yeni bağlantı: benholland.me/javascript/2012/02/20/…
— Lukmo
57

Bir jQuery eklentisi yayınladık çünkü Wookmark için aynı soruyu birkaç kez aldık . Tam olarak bu tür bir düzen oluşturur. Burada görüntüleyin - Wookmark jQuery eklentisi

— GBKS
kaynak
4
Bu çözüm duvardan daha hızlı yükleniyor gibi görünüyor
— Michael L Watson
hangisini daha iyi buluyorsun? Wookmark mı yoksa duvarcılık mı?
— Ramje
Bunu duvarcılık yerine tercih ederim, Michael'ın dediği gibi daha hızlı görünüyor.
— nerdburn
2

Tüm seçeneklere baktıktan sonra, Pinterest'e benzer bir düzeni şu şekilde uyguladım:

Tüm DIV'ler:

div.tile {
    display: inline-block;
    vertical-align: top;
}

Bu onları sıralar halinde yüzdüklerinden daha iyi konumlandırır.

Ardından sayfa yüklendiğinde, JavaScript'teki tüm DIV'leri aralarındaki boşlukları kaldırmak için yineliyorum. Şu durumlarda kabul edilebilir derecede iyi çalışır:

  1. DIV'lerin yüksekliği çok farklı değildir.
  2. Bazı küçük sipariş ihlallerine aldırış etmiyorsunuz (aşağıda bulunan bazı unsurlar yukarı çekilebilir).
  3. Alt satırın farklı yükseklikte olmasına aldırmazsınız.

Bu yaklaşımın yararı - HTML'niz arama motorları için anlamlıdır, JavaScript devre dışı bırakıldığında / güvenlik duvarı tarafından engellendiğinde çalışabilir, HTML'deki öğelerin sırası mantıksal sırayla eşleşir (daha eski olanlardan daha yeni öğeler)

— esp
kaynak
Hey, bana çıkarmak zorunda kaldığın ofseti nasıl hesapladığını söyleyebilir misin? Ve ayrıca son elementin sağ tarafta olması problemini nasıl çözdünüz, çünkü biraz daha büyük olan ve onu oraya iten bir element var.
— Lukas Oppermann
@LukasOppermann 1) Döşemenin ofseti, önceki satırdaki aynı sütunda yer alan döşemenin ofsetinin toplamı ve önceki satırdaki en yüksek döşemenin yüksekliği ile aynı sütundaki döşemenin yüksekliği arasındaki farktır. önceki satırda. Dev.sheeporpig.com/news'e bir göz atın ( geliştirme sitesine erişmek için önce dev.sheeporpig.com/sheep/3210 bağlantısını tıklamanız gerekir - böylece sıkıştırılmamış ve yorumlanmış komut dosyalarını ayrı dosyalarda görebilirsiniz), komut dosyası dosyası stock_news.js, function compressTiles.
— esp
@LukasOppermann 2) Cevap olarak CSS kullanırsanız (özellikle display: inline-block) bu olmaz. Yalnızca float yaparsanız olur: div'lerinizi bıraktı. Ben float kullanmıyorum.
— esp
0

Varlıkları kimlikleri olan sütunlara bölerler (kötü çözüm ... sınıf adlarını daha iyi kullanın) ve ardından konumları sütun gruplarına göre hesaplarlar

— ant_Ti
kaynak
2
+1 Kaynak kodlarına göz atmak için.
— Bojangles
Benim için ilginçti ama sanırım daha az js hesaplamasıyla daha iyi bir çözüm var
— ant_Ti
display: inline-blockSanırım kullanabilirsin , ancak farklı dikey yükseklikteki öğeler bir arada oturmaz.
— Bojangles
1
sütun kapları kullanmak (divs ile float:left;ve sonuncusu ile overflow: hidden;) ve öğeleri orada saklamak daha
— iyidir
4
İyi bir nokta. Gerçekten JavaScript rotasına gitmek istiyorsanız, jQuery Masonry'yi kullanabilirsiniz.
— Bojangles
0

Minimum genişliğe ulaşıldığında div'leri otomatik olarak düşmeye zorlamak için minimum genişlik ile birlikte yüzdeleri kullanarak div genişliklerinizi boyutlandırabilir ve kayan değerleri kullanabilirsiniz. Http://www.goldtree.co.za/work üzerinde çalışmasını sağlama şeklimiz budur

— Ben Goldtree'yim
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.