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

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:

DIV tidak jauh berbeda tingginya.
Anda tidak keberatan dengan beberapa pelanggaran kecil dalam memesan (beberapa elemen yang ada di bawah ini dapat ditarik ke atas).
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

Mengapa Anda tidak mencoba ini, hal-hal js sederhana

http://vanilla-masonry.desandro.com/index.html

Atau bahkan ini dengan jQuery dan memiliki pemuatan gulir juga.

http://masonry.desandro.com/index.html

— Seorang Pekerja Cerah
sumber

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