Có ai biết cách bố cục của Pinterest.com hoạt động không?

Question

Trên http://pinterest.com/ có 'ghim' tức là <div> s có chiều cao thay đổi nhưng tất cả dường như hiển thị rất tốt mà không có khoảng trống '' hoặc ngắt dòng để làm gián đoạn luồng. Có một lời giải thích tốt/đơn giản về cách họ nhận được CSS để cư xử và thực hiện điều đó (tôi hy vọng sẽ tìm hiểu và hiểu hơn là chỉ vận chuyển hàng hóa-cult tập tin CSS của họ!). Cảm ơn trước

Answer 1

Kiểm tra JQuery Masonry, đó sẽ là cách đơn giản nhất để đạt được bố cục bạn muốn. http://masonry.desandro.com/

Tôi đã đọc một số javascript của Pinterest cách đây vài tháng để tìm ra điều này. Tóm lại, họ không làm điều đó với CSS cả. Chúng định vị tất cả các ô/ghim của chúng một cách động bằng cách lặp qua tất cả chúng, tính chiều cao và thả nó ở cuối cột nào có chiều cao ngắn nhất tại thời điểm này (thêm chiều cao của ô vào đó). Về cơ bản, không có lừa cho nó, nó chỉ là Javascript.

Answer 2

Css không thể thực hiện điều đó theo cách bạn muốn đến. Javascript, like this example, có thể.

Do các hàng có nội dung nổi hoặc nội tuyến bị chặn hoạt động, css không phù hợp với công việc. Bạn sẽ phải tự động tạo các cột dọc của nội dung và đặt chúng cạnh nhau, nghĩa là bạn phải chiến đấu để có được nội dung hiện tại ở trên cùng. Nó thực sự là một nỗi đau. Bạn cũng sẽ mất độ nhạy với chiều rộng cửa sổ.

Answer 3

Bạn có thể đọc phản ứng đồng sáng lập của Pinterest để một câu hỏi trước đó về vấn đề này: how to replicate pinterest.com's absolute div stacking layout

Answer 4

Bạn bây giờ có thể thực sự làm điều đó với css3

.three-col { 
    -moz-column-count: 3; 
    -moz-column-gap: 20px; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 20px; 
} 

dẫn Hoàn tại địa chỉ: http://kmsm.ca/2010/an-almost-complete-guide-to-css3-multi-column-layouts/

Answer 5

Sau khi nhìn ở tất cả các tùy chọn, tôi đã kết thúc triển khai bố cục tương tự như Pinterest theo cách này:

Tất cả các DIV là:

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

Điều này làm cho chúng có vị trí tốt hơn khi được thả nổi.

Sau đó, khi trang được tải, tôi lặp lại tất cả các DIV trong JavaScript để loại bỏ các khoảng trống giữa chúng. Nó hoạt động tốt khi được chấp nhận khi:

1. DIV không khác biệt về chiều cao.
2. Bạn không ngại một số vi phạm nhỏ về đặt hàng (một số yếu tố bên dưới có thể được kéo lên trên).
3. Bạn không nhớ dòng dưới cùng có chiều cao khác nhau.

Lợi ích của cách tiếp cận này - HTML của bạn có ý nghĩa đối với công cụ tìm kiếm, có thể hoạt động với Javascript bị chặn/chặn bởi tường lửa, chuỗi phần tử trong HTML khớp với chuỗi logic (các mục mới hơn trước cũ). Bạn có thể thấy nó đang hoạt động tại http://SheepOrPig.com/news

Answer 6

Cách đơn giản nhất và đơn giản nhất mà tôi đã thực hiện, có vẻ như là phần ứng. Nhưng tôi đã nghĩ đến việc chia sẻ .....

Đây là bố cục ba cột ...

First 3 container sẽ không thêm chiều cao cho nó .. chứa 4 sẽ lấy chiều cao và vị trí hàng đầu của container 1 (có nghĩa là prev().prev().prev())

counter = counter+1; 
if(counter > 3){ 
var getTop = $(this).prev().prev().prev().offset(); 
var getLeft = $(this).prev().prev().prev().offset(); 
var getHeight = $(this).prev().prev().prev().height(); 
var countTPH = getTop.top + getHeight - 20; 
$(this).css({"position":"absolute","top":countTPH+"px","left":getLeft.left+"px"}); 
      } 

Tôi đã đưa prev() chỉ để làm cho người đọc hiểu mã đơn giản 1

Answer 7

Cách thức hoạt động đơn giản: Ở đây, tôi đã viết bài viết của riêng mình chỉ trong vài phút. http://jsfiddle.net/92gxyugb/1/

coffescript

tiles = $('.tiles .t') 
container = $('.tiles').width() 
width  = $('.tiles .t:first').width() 
columns_height = {} 
columns = Math.floor container/width 
space  = container % width 
space  = space/(columns-1) 

for tile,i in tiles 
    column_index = i % columns 
    columns_height[column_index] ?= 0 
    sp = switch column_index 
    when 0 then 0 
    when columns then 0 
    else 
     space * column_index 
    $(tile).css 
    top: columns_height[column_index] 
    left: (column_index * width)+sp 
    columns_height[column_index] += $(tile).height()+space 

max_height = 0 
for k,v of columns_height 
    if v > max_height 
    max_height = v 
$('.tiles').height max_height-space 

html

<div class='tiles'> 
    <div class='t t1'></div> 
    <div class='t t2'></div> 
    <div class='t t3'></div> 
    <div class='t t4'></div> 
    <div class='t t5'></div> 
    <div class='t t6'></div> 
    <div class='t t7'></div> 
    <div class='t t8'></div> 
    <div class='t t9'></div> 
    <div class='t t10'></div> 
    <div class='t t11'></div> 
    <div class='t t12'></div> 
    <div class='t t13'></div> 
    <div class='t t14'></div> 
    <div class='t t15'></div> 
    <div class='t t16'></div> 
</div> 

css

.tiles {position: relative; width: 500px; background: rgb(140,250,250); } 
.t { position: absolute; width: 87px; background: rgb(100,100,100); } 
.t1 { height: 100px; } 
.t2 { height: 140px; } 
.t3 { height: 200px; } 
.t4 { height: 180px; } 
.t5 { height: 120px; } 
.t6 { height: 150px; } 
.t7 { height: 180px; } 
.t8 { height: 200px; } 
.t9 { height: 120px; } 
.t10 { height: 160px; } 
.t11 { height: 210px; } 
.t12 { height: 160px; } 
.t13 { height: 150px; } 
.t14 { height: 150px; } 
.t15 { height: 130px; } 
.t16 { height: 170px; } 

Answer 8

Andrews Câu trả lời là tuyệt vời! Tôi đã tìm kiếm một giải pháp và cuối cùng đã nhận nó ... Như Andrew đã viết bởi vị trí .. Ở đây đoạn JS của tôi. Không hoàn hảo, nhưng đúng hướng. Cảm ơn Andrew!

var tilename = 6; 

for (var i = 0; i < document.querySelectorAll('#tiles .t').length; i++) { 
    document.getElementsByClassName("t"+tilename)[0].style.top = document.getElementsByClassName("t"+(tilename-5))[0].offsetHeight + 10; 
    tilename += 1; 
}