Làm cách nào để tạo bố cục lưới động, tùy chỉnh bằng CSS và JavaScript?

Question

Tôi đang làm việc trên một dự án liên quan đến rất nhiều CSS. Khách hàng muốn có bố cục lưới trên trang chủ nơi anh ấy muốn có thể sắp xếp lại các thành phần giao diện người dùng bằng cách kéo và thả. Các thành phần giao diện người dùng này có thể có kích thước khác nhau: 1x1, 2x2 và 3x3. Khi tôi thả một mục UI ở vị trí mới mong muốn, nó sẽ đẩy các thành phần khác sang một bên. Bất kỳ lỗ nào có thể phải được lấp đầy với các thành phần 1x1.

How it should work

1. Trước khi tôi đã draged một thành phần
2. việc kéo các thành phần 2x2
3. Thả các thành phần ở giữa, hai thành phần 1x1 nhường chỗ và thích ứng với xung quanh 2x2

Lưu ý rằng kích thước của lưới không giới hạn ở 8 1x1, nhưng chiều cao cũng như chiều rộng của lưới có thể mở rộng và nhỏ hơn.

Tôi thà không sử dụng các bảng nhưng ngoài lý do tôi mở cho các đề xuất. Ngay bây giờ tôi đã sử dụng các div khối nội tuyến mà tôi có thể kéo và thả để chuyển đổi các đối tượng jQuery DOM. Hiệu ứng không hoàn toàn là những gì khách hàng muốn: How it is now

Answer 1

Tôi đã tạo nhiều bố cục động với cùng một ý tưởng. Bạn cần phải suy nghĩ nhiều hơn về cách hành vi nổi của bạn từ khối để chặn là dừng lại cho các khối tiếp theo sau, vì vậy chúng trở thành vị trí chính xác như bạn muốn. Vì vậy, để xác định một phần tử float-stop là cần thiết. Các khối của bạn sẽ hoạt động với float:left có thể là float:right. Tại một số điểm bạn sẽ tìm ra rằng hành vi này phải dừng lại ở đâu đó tốt nhất thực hiện với CSS

.floatstop { 
    clear: both; //the important code here.. 
    width: 100%; 
    height: 1px; 
    line-height: 1px; 
    margin-top:-1px; 
} 

và Html

<div class="floatstop"></div> 

Made của tất cả các khối, những người cần biên giới vào khối tiếp theo ở phía bên trái (có lẽ bên phải quá), bạn phải xác định một bố trí cơ bản có không gian cho khối đặt rất đúng quá với không gian biên giới cho nó, nếu không nó sẽ trôi xuống dưới khối trước.

Nhưng có một cách hiện đại hơn! Bạn có thể sử dụng mã CSS3 để xác định bố cục của mình.

.columnblock { 
    width: 100%; 
    column-gap: 30px; 
    // for symmetric columned layouts use.. 
    column-count: 3; 
    // or for not symmetric layouts use.. 
    column-width: 280px; 
} 

<div class="columnblock"> 
    <p>Lorem Ipsum</p> 
    <p>another Paragraph</p> 
</div> 

Có những thứ khác để đề cập đến ở đây nhưng bạn có thể đọc về http://www.w3schools.com/css3/css3_multiple_columns.asp