cara mereplikasi tata letak penumpukan div absolut pinterest.com [closed]

104

Saya ingin meniru tata letak div Pinterest.com, khususnya bagaimana jumlah kolom menyesuaikan agar lebih / kurang sesuai pada perubahan ukuran browser dan penumpukan vertikal tidak bergantung pada ketinggian kolom yang berdekatan. Kode sumber menunjukkan bahwa setiap div adalah posisi absolut. Salah satu pendiri telah menjawab postingan Quora yang menyatakan hal itu dilakukan dengan jQuery dan CSS khusus. Saya ingin hasil diurutkan dari kiri ke kanan. Arahan apa pun yang Anda berikan untuk membuatnya sendiri akan sangat dihargai.

jquery css layout chrickso
sumber
Saya membuat kode saya sendiri dengan Jquery dan CSS sederhana. Jika Anda ingin ini mengubah ukuran, Anda cukup membungkusnya dalam sebuah fungsi dan perhatikan perubahan ukuran pada elemen kontainer jsfiddle.net/92gxyugb/1
Andrew WC Brown

Jawaban:

79

Anda juga dapat memeriksa jQuery Plug-in Masonry , untuk fungsi semacam ini.

Bob.
sumber
3
Perpustakaan yang benar-benar menakjubkan. Sekarang saya menggunakannya tanpa masalah.
AhmetB - Google
183

Saya menulis skrip Pinterest. ID tidak terkait dengan tata letak, dan digunakan untuk JS terkait interaksi lainnya. Inilah dasar cara kerjanya:

Sebelumnya:

  • Posisikan wadah pin dengan benar
  • Tentukan lebar kolom
  • Tentukan margin antar kolom (talang)

Siapkan array:

  • Dapatkan lebar wadah induk; hitung # kolom yang sesuai
  • Buat larik kosong, dengan panjang yang sama dengan # kolom. Gunakan larik ini untuk menyimpan tinggi setiap kolom saat Anda membangun tata letak, misalnya tinggi kolom 1 disimpan sebagai larik [0]

Ulangi setiap pin:

  • Letakkan setiap pin di kolom terpendek saat ditambahkan
  • "kiri:" === kolom # (larik indeks) dikalikan lebar kolom + margin
  • "top:" === Nilai dalam larik (tinggi) untuk kolom terpendek saat itu
  • Terakhir, tambahkan tinggi pin ke tinggi kolom (nilai array)

Hasilnya ringan. Di Chrome, meletakkan satu halaman penuh dengan 50+ pin membutuhkan <10 md.

Evan Sharp
sumber
4
Bagaimana maksud Anda menghitung tinggi kolom? Bagaimana Anda tahu seberapa tinggi seharusnya jika Anda tidak mengetahui jumlah dan tinggi barang di dalamnya? Adakah kemungkinan Anda bisa membuat layout beberapa kode palsu untuk didemonstrasikan?
Michael Giovanni Pumo
22
inilah tutorial yang solid - benholland.me/javascript/…
hollandben
1
Umpan balik dari pengguna anonymus (ditemukan di antrian edit): Anehnya saya melakukan skrip yang persis sama di jQuery, dengan sedikit perbedaan sebenarnya membuat tabel dengan 1 baris dan N kolom, dan hanya menambahkannya ke kolom terpendek dari kiri ke kanan prioritas. Meskipun saya juga menambahkan Konstanta "Perbedaan ketinggian minimum" yang diperlukan untuk benar-benar melewati kolom saat memosisikan dari kiri ke kanan, ini memberikan tata letak tampilan yang intuitif secara kronologis tanpa kehilangan ketinggian yang sedapat mungkin
oers
1
@MichaelGiovanniPumo Menurut saya ketinggian harus diketahui sebelum tata letak (dalam kasus Pinterest), mereka tidak memiliki status "awal" yang memiliki div yang tumpang tindih satu sama lain. Ini tidak bisa dilakukan jika ketinggiannya tidak diketahui.
ptgamr
1
Link @ hollandben sudah mati, link baru: benholland.me/javascript/2012/02/20/…
Lukmo
57

Kami merilis plugin jQuery karena kami mendapat pertanyaan yang sama beberapa kali untuk Wookmark . Ini menciptakan jenis tata letak yang persis seperti ini. Lihat di sini - plugin jQuery Wookmark

GBKS
sumber
4
Solusi ini tampaknya memuat lebih cepat daripada pasangan bata
Michael L Watson
mana yang menurutmu lebih baik? wookmark atau pasangan bata?
Ramje
Saya lebih suka ini daripada pasangan bata, sepertinya lebih cepat seperti kata Michael.
nerdburn
2

Setelah melihat semua opsi, saya akhirnya menerapkan tata letak yang mirip dengan Pinterest dengan cara ini:

Semua DIV adalah:

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

Hal ini membuat posisinya dalam baris lebih baik daripada saat diapungkan.

Kemudian ketika halaman dimuat, saya mengulang semua DIV di JavaScript untuk menghilangkan celah di antara mereka. Ini bekerja dengan baik jika:

  1. DIV tidak jauh berbeda tingginya.
  2. Anda tidak keberatan dengan beberapa pelanggaran kecil dalam memesan (beberapa elemen yang ada di bawah ini dapat ditarik ke atas).
  3. Anda tidak keberatan garis bawah memiliki ketinggian yang berbeda.

Manfaat dari pendekatan ini - HTML Anda masuk akal untuk mesin telusur, dapat berfungsi dengan JavaScript yang dinonaktifkan / diblokir oleh firewall, urutan elemen dalam HTML sesuai dengan urutan logis (item yang lebih baru sebelum yang lebih lama)

esp
sumber
Hei, bisakah Anda memberi tahu saya bagaimana Anda menghitung offset yang harus Anda kurangi? Dan juga bagaimana Anda menyelesaikan masalah elemen terakhir berada di sisi kanan, karena ada satu elemen yang sedikit lebih besar dan mendorongnya ke sana.
Lukas Oppermann
@LukasOppermann 1) Offset untuk ubin adalah jumlah offset ubin di kolom yang sama di baris sebelumnya dan selisih antara tinggi ubin tertinggi di baris sebelumnya dan tinggi ubin di kolom yang sama di baris sebelumnya. Silahkan lihat pada dev.sheeporpig.com/news (Anda harus terlebih dahulu klik pada link dev.sheeporpig.com/sheep/3210 untuk mendapatkan akses ke situs pengembangan - sehingga Anda dapat melihat skrip terkompresi & berkomentar di file terpisah), file script stock_news.js, fungsi compressTiles.
khususnya
@LukasOppermann 2) Jika Anda menggunakan CSS sebagai jawaban (terutama display: inline-block) itu tidak terjadi. Ini hanya terjadi jika Anda float: meninggalkan div Anda. Saya tidak menggunakan float.
khususnya
0

Mereka membagi entitas dengan kolom dengan id (solusi buruk ... lebih baik gunakan nama kelas) dan kemudian menghitung posisi berdasarkan kelompok kolom

ant_Ti
sumber
2
+1 Untuk melihat-lihat kode sumber mereka.
Bojangles
Menarik bagi saya, tetapi saya pikir ada solusi yang lebih baik dengan perhitungan js yang lebih sedikit
ant_Ti
Anda bisa menggunakan display: inline-blocksaya kira, tetapi item dengan ketinggian vertikal berbeda tidak akan duduk bersama.
Bojangles
1
lebih baik menggunakan wadah kolom (div dengan float:left;dan yang terakhir dengan overflow: hidden;) dan menyimpan elemen di sana
ant_Ti
4
Poin yang bagus. Jika Anda benar-benar ingin menggunakan rute JavaScript, Anda dapat menggunakan jQuery Masonry?
Bojangles
0

Anda dapat menggunakan float dan mengukur lebar div Anda menggunakan persentase bersama dengan min-width untuk memaksa div secara otomatis jatuh setelah lebar minimum tercapai? Ini cara kami membuatnya bekerja di http://www.goldtree.co.za/work

Saya Goldtree
sumber