วิธีการจำลองเลย์เอาต์การซ้อน div สัมบูรณ์ของ pinterest.com [ปิด]

104

ฉันต้องการจำลองเค้าโครง div ของ Pinterest.com โดยเฉพาะการปรับจำนวนคอลัมน์ให้พอดีกับการปรับขนาดเบราว์เซอร์มากขึ้น / น้อยลงและการเรียงซ้อนในแนวตั้งไม่ได้ขึ้นอยู่กับความสูงของคอลัมน์ที่อยู่ติดกัน ซอร์สโค้ดแสดงว่าแต่ละ div เป็นตำแหน่งสัมบูรณ์ ผู้ร่วมก่อตั้งได้ตอบโพสต์ Quora โดยระบุว่าทำด้วย jQuery และ CSS ที่กำหนดเอง ฉันต้องการให้ผลลัพธ์เรียงจากซ้ายไปขวา ทิศทางใด ๆ ที่คุณสามารถให้เพื่อทำให้ตัวเองได้รับการชื่นชมอย่างมาก

jquery  css  layout 
— chrickso
แหล่งที่มา
ฉันเขียนโค้ดของตัวเองด้วย Jquery และ CSS ง่ายๆ หากคุณต้องการให้สิ่งนี้เปลี่ยนแปลงในการปรับขนาดคุณเพียงแค่รวมไว้ในฟังก์ชันและดูการปรับขนาดองค์ประกอบคอนเทนเนอร์jsfiddle.net/92gxyugb/1
— Andrew WC Brown

คำตอบ:

79

คุณสามารถตรวจสอบ jQuery Plug-in Masonryสำหรับฟังก์ชันประเภทนี้ได้ด้วย

— บ๊อบ.
แหล่งที่มา
3
ห้องสมุดที่น่าตื่นตาตื่นใจอย่างแท้จริง ตอนนี้ฉันใช้มันโดยไม่มีปัญหาใด ๆ
— AhmetB - Google
183

ฉันเขียนสคริปต์ Pinterest ID ไม่เกี่ยวข้องกับเค้าโครงและใช้สำหรับ JS ที่เกี่ยวข้องกับการโต้ตอบอื่น ๆ นี่คือพื้นฐานของวิธีการทำงาน:

ล่วงหน้า:

  • กำหนดตำแหน่งพินคอนเทนเนอร์อย่างแน่นอน
  • กำหนดความกว้างของคอลัมน์
  • กำหนดระยะขอบระหว่างคอลัมน์ (รางน้ำ)

ตั้งค่าอาร์เรย์:

  • รับความกว้างของคอนเทนเนอร์หลัก คำนวณ # ของคอลัมน์ที่จะพอดี
  • สร้างอาร์เรย์ว่างโดยมีความยาวเท่ากับ # คอลัมน์ ใช้อาร์เรย์นี้เพื่อเก็บความสูงของแต่ละคอลัมน์ในขณะที่คุณสร้างเลย์เอาต์เช่นความสูงของคอลัมน์ 1 จะถูกเก็บเป็นอาร์เรย์ [0]

วนผ่านแต่ละพิน:

  • ใส่หมุดแต่ละอันในคอลัมน์ที่สั้นที่สุดในขณะที่เพิ่ม
  • "left:" === คอลัมน์ # (อาร์เรย์ดัชนี) คูณความกว้างของคอลัมน์ + ระยะขอบ
  • "top:" === ค่าในอาร์เรย์ (ความสูง) สำหรับคอลัมน์ที่สั้นที่สุดในขณะนั้น
  • สุดท้ายเพิ่มความสูงของพินที่ความสูงของคอลัมน์ (ค่าอาร์เรย์)

ผลที่ได้คือน้ำหนักเบา ใน Chrome การจัดวางพินแบบเต็มหน้ามากกว่า 50 พินใช้เวลา <10ms

— Evan Sharp
แหล่งที่มา
4
คุณหมายถึงการคำนวณความสูงของคอลัมน์อย่างไร? คุณจะรู้ได้อย่างไรว่ามันควรจะสูงแค่ไหนถ้าคุณไม่รู้จำนวนและความสูงของสิ่งของที่อยู่ในนั้น? มีโอกาสใดบ้างที่คุณสามารถจัดวางโค้ดหลอกเพื่อแสดงให้เห็น?
— Michael Giovanni Pumo
22
นี่คือบทช่วยสอนที่มั่นคง - benholland.me/javascript/…
— hollandben
1
คำติชมจากผู้ใช้ anonymus (พบในคิวแก้ไข): อยากรู้อยากเห็นว่าฉันทำสคริปต์เดียวกันใน jQuery โดยมีความแตกต่างเล็กน้อยในการสร้างตารางที่มี 1 แถวและ N คอลัมน์และต่อท้ายด้วยคอลัมน์ที่สั้นที่สุดจากซ้ายไปขวา ลำดับความสำคัญ. ถึงแม้ว่าผมจะยังเพิ่ม "ขั้นต่ำความสูงแตกต่างกัน" คงต้องจริงข้ามคอลัมน์การวางตำแหน่งจากซ้ายไปขวานี้จะช่วยให้รูปแบบการแสดงผลที่ใช้งานง่ายตามลำดับโดยไม่สูญเสียความสูงการเป็นแม้จะเป็นไปได้
— oers
1
@MichaelGiovanniPumo ฉันคิดว่าควรทราบความสูงก่อนการจัดวาง (ในกรณีของ Pinterest) พวกเขาไม่มีสถานะ "เริ่มต้น" ที่มี div ซ้อนทับกัน ไม่สามารถทำได้หากไม่ทราบความสูง
— ptgamr
1
ลิงค์ของ @ hollandben ตายลิงค์ใหม่: benholland.me/javascript/2012/02/20/…
— Lukmo
57

เราได้เปิดตัวปลั๊กอิน jQuery เพราะเรามีคำถามเดียวกันหลายครั้งสำหรับWookmark มันสร้างเลย์เอาต์ประเภทนี้ ดูได้ที่นี่ - ปลั๊กอิน Wookmark jQuery

— GBKS
แหล่งที่มา
4
โซลูชันนี้ดูเหมือนจะโหลดเร็วกว่าการก่ออิฐ
— Michael L Watson
อันไหนดีกว่ากัน wookmark หรือการก่ออิฐ?
— Ramje
ฉันชอบสิ่งนี้มากกว่าการก่ออิฐดูเหมือนเร็วกว่าอย่างที่ไมเคิลพูด
— เนิร์ดเบิร์น
2

เมื่อดูตัวเลือกทั้งหมดฉันลงเอยด้วยการใช้เลย์เอาต์ที่คล้ายกับ Pinterest ด้วยวิธีนี้:

DIV ทั้งหมดคือ:

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

ทำให้วางตำแหน่งในแถวได้ดีกว่าเวลาลอย

จากนั้นเมื่อโหลดหน้าฉันจะวนซ้ำ DIV ทั้งหมดใน JavaScript เพื่อลบช่องว่างระหว่างพวกเขา ทำงานได้ดีเมื่อ:

  1. DIV มีความสูงไม่ต่างกันมาก
  2. คุณไม่ต้องกังวลกับการละเมิดคำสั่งซื้อเล็กน้อย (องค์ประกอบบางอย่างที่อยู่ด้านล่างสามารถดึงขึ้นด้านบนได้)
  3. คุณไม่สนใจว่าบรรทัดล่างคือความสูงที่แตกต่างกัน

ประโยชน์ของวิธีนี้ - HTML ของคุณเหมาะสมกับเครื่องมือค้นหาสามารถทำงานร่วมกับ JavaScript ที่ปิดใช้งาน / บล็อกโดยไฟร์วอลล์ลำดับขององค์ประกอบใน HTML จะตรงกับลำดับตรรกะ (รายการใหม่กว่าก่อนเก่ากว่า)

— esp
แหล่งที่มา
เฮ้คุณช่วยบอกฉันได้ไหมว่าคุณคำนวณค่าชดเชยที่คุณต้องลบออกได้อย่างไร และคุณแก้ปัญหาขององค์ประกอบสุดท้ายที่อยู่ทางด้านขวาได้อย่างไรเพราะมีองค์ประกอบหนึ่งที่ใหญ่กว่าเล็กน้อยและดันไปตรงนั้น
— Lukas Oppermann
@LukasOppermann 1) ค่าชดเชยสำหรับไทล์คือผลรวมของออฟเซ็ตสำหรับไทล์ในคอลัมน์เดียวกันในแถวก่อนหน้าและความแตกต่างระหว่างความสูงของไทล์สูงสุดในแถวก่อนหน้ากับความสูงของไทล์ในคอลัมน์เดียวกัน ในแถวก่อนหน้า เข้าไปดูได้ที่dev.sheeporpig.com/news (ก่อนอื่นคุณต้องคลิกที่ลิงค์dev.sheeporpig.com/sheep/3210เพื่อเข้าถึงไซต์การพัฒนา - เพื่อให้คุณสามารถดูสคริปต์ที่ไม่บีบอัดและแสดงความคิดเห็นในไฟล์แยกต่างหาก) ไฟล์สคริปต์ stock_news.js, ฟังก์ชัน compressTiles
— esp
@LukasOppermann 2) หากคุณใช้ CSS เป็นคำตอบ (โดยเฉพาะ display: inline-block) จะไม่เกิดขึ้น จะเกิดขึ้นก็ต่อเมื่อคุณลอย: ออกจาก div ของคุณ ฉันไม่ใช้ลูกลอย
— esp
0

พวกเขาแยกเอนทิตีตามคอลัมน์ด้วยรหัส (วิธีแก้ปัญหาที่ไม่ดี ... ควรใช้ชื่อคลาสดีกว่า) แล้วคำนวณตำแหน่งตามกลุ่มคอลัมน์

— ant_Ti
แหล่งที่มา
2
+1 สำหรับการดูซอร์สโค้ด
— Bojangles
มันน่าสนใจสำหรับฉัน แต่ฉันคิดว่ามีทางออกที่ดีกว่าด้วยการคำนวณ js น้อยลง
— ant_Ti
คุณสามารถใช้display: inline-blockฉันคิดว่า แต่สิ่งของที่มีความสูงแนวตั้งต่างกันจะไม่นั่งรวมกัน
— Bojangles
1
ควรใช้คอนเทนเนอร์คอลัมน์ (div กับfloat:left;และสุดท้ายด้วยoverflow: hidden;) และเก็บองค์ประกอบไว้ที่นั่น
— ant_Ti
4
จุดดี. หากคุณต้องการไปเส้นทาง JavaScript จริงๆคุณสามารถใช้ jQuery Masonry?
— Bojangles
0

คุณสามารถใช้การลอยตัวและปรับขนาดความกว้าง div ของคุณโดยใช้เปอร์เซ็นต์ร่วมกับความกว้างขั้นต่ำเพื่อบังคับให้ div ตกลงโดยอัตโนมัติเมื่อถึงความกว้างต่ำสุด? เป็นวิธีที่เราใช้งานได้บนhttp://www.goldtree.co.za/work

— ฉันคือโกลด์ทรี
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.