cách sao chép bố cục xếp chồng div tuyệt đối của pinterest.com [đã đóng]

Tôi đang tìm cách sao chép bố cục div của Pinterest.com, cụ thể là cách số lượng cột điều chỉnh để phù hợp hơn / ít hơn khi thay đổi kích thước trình duyệt và việc xếp chồng theo chiều dọc không phụ thuộc vào chiều cao cột liền kề. Mã nguồn cho thấy rằng mỗi div là vị trí tuyệt đối. Một người đồng sáng lập đã trả lời một bài đăng trên Quora nói rằng nó được thực hiện với jQuery và CSS tùy chỉnh. Tôi muốn các kết quả được sắp xếp từ trái sang phải. Bất kỳ hướng nào bạn có thể cung cấp để thực hiện nó sẽ được đánh giá rất cao.

Bạn cũng có thể kiểm tra jQuery Plug-in Masonry , để biết loại chức năng này.

Tôi đã viết kịch bản Pinterest. ID không liên quan đến bố cục và được sử dụng cho JS liên quan đến tương tác khác. Đây là cơ sở về cách nó hoạt động:

Tới trước:

• Định vị tuyệt đối các hộp đựng ghim
• Xác định chiều rộng cột
• Xác định lề giữa các cột (rãnh)

Thiết lập một mảng:

• Lấy chiều rộng của vùng chứa mẹ; tính toán số cột sẽ phù hợp
• Tạo một mảng trống, có độ dài bằng số cột. Sử dụng mảng này để lưu trữ chiều cao của mỗi cột khi bạn xây dựng bố cục, ví dụ: chiều cao của cột 1 được lưu trữ dưới dạng mảng [0]

Lặp qua từng chốt:

• Đặt mỗi ghim vào cột ngắn nhất tại thời điểm nó được thêm vào
• "left:" === cột # (mảng chỉ số) nhân với chiều rộng cột + lề
• "top:" === Giá trị trong mảng (chiều cao) cho cột ngắn nhất tại thời điểm đó
• Cuối cùng, thêm chiều cao của ghim vào chiều cao cột (giá trị mảng)

Kết quả là nhẹ. Trong Chrome, việc tạo ra một trang đầy đủ hơn 50 chân chỉ mất <10 mili giây.

Chúng tôi đã phát hành một plugin jQuery vì chúng tôi đã nhận được cùng một câu hỏi nhiều lần cho Wookmark . Nó tạo ra chính xác kiểu bố trí này. Xem nó ở đây - plugin Wookmark jQuery

Sau khi xem xét tất cả các tùy chọn, tôi đã kết thúc việ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 định vị trong hàng tốt hơn so với khi chúng đượ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ỏ khoảng cách giữa chúng. Nó hoạt động tốt khi:

1. Các DIV không khác nhau nhiều về chiều cao.
2. Bạn không ngại một số vi phạm nhỏ về thứ tự (một số yếu tố bên dưới có thể được kéo lên phía trên).
3. Bạn không ngại điểm mấu chốt là 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ác công cụ tìm kiếm, có thể hoạt động với JavaScript bị vô hiệu hóa / bị chặn bởi tường lửa, chuỗi các phần tử trong HTML khớp với chuỗi logic (các mục mới hơn trước cũ hơn)

Họ chia các thực thể theo cột với id (giải pháp không tốt ... tốt hơn nên sử dụng tên lớp) và sau đó tính toán vị trí theo nhóm cột

Tại sao bạn không thử điều này, công cụ js đơn giản

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

Hoặc thậm chí điều này với jQuery và tải cuộn.

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

Bạn có thể sử dụng phao và định kích thước chiều rộng div của mình bằng cách sử dụng tỷ lệ phần trăm cùng với chiều rộng tối thiểu để buộc các div tự động giảm xuống khi đạt đến chiều rộng tối thiểu? Đó là cách chúng tôi làm cho nó hoạt động trên http://www.goldtree.co.za/work