Bố cục phù hợpCấu hình đồng vị làm cho vùng chứa bị trống

Question

Xem http://jsfiddle.net/cUcFd/5/ - lưu ý rằng nếu bạn thay đổi layoutMode thành 'masonry' hoặc 'fitRows' thì nó hoạt động tốt. Nhưng với 'fitColumns' nó chỉ đơn giản là trống, và tất cả các khối biến mất.

Dường như có các yêu cầu về kiểu dáng được đặt trên vùng chứa và các mục để chế độ fitColumns hoạt động nhưng tôi không thể tìm thấy bất kỳ tài liệu nào về chúng.

Answer 1

Tại sao nó không làm việc

fitColumns là một "bố trí theo chiều ngang", vì vậy nó có ý định đi tắt sang một bên thay vì lên xuống - tương tự như một trò chơi phụ cuộn. Với thiết kế của họ, bố trí ngang đòi hỏi phải có thuộc tính chiều cao, như ghi nhận ở đây: http://isotope.metafizzy.co/layout-modes.html#horizontal-layouts

tĩnh Giải pháp

tôi muốn lấp đầy chiều rộng của thùng chứa với tuy nhiên nhiều cột phù hợp, và tôi muốn nó chiếm nhiều không gian theo chiều dọc cần thiết.

Bạn muốn sử dụng masonry thay vì fitColumns. Đặt columnWidth sẽ cho phép bạn lấp đầy chiều rộng của vùng chứa và sử dụng nhiều không gian dọc nếu cần. Ví dụ: http://jsfiddle.net/cUcFd/22/

$('#container').isotope({ 
    itemSelector : '.block', 
    // layoutMode: 'fitColumns', 
    layoutMode: 'masonry', 
    masonry: { 
     columnWidth: 100 
    } 
}); 

động Giải pháp

Giả sử bạn không biết độ rộng của các cột của bạn và muốn tìm nó tự động, bạn có thể căn cứ nó ra khỏi yếu tố rộng nhất trong #container sử dụng một cái gì đó như mã được cung cấp ở đây: https://stackoverflow.com/a/8853777/1786459

Ví dụ: http://jsfiddle.net/cUcFd/24/

var column_width = Math.max.apply(null,$('#container .block').map(function(){return $(this).outerWidth(true);}).get()); 

Tuy nhiên, bạn sẽ quyết định phương pháp thích hợp nhất để đặt chiều rộng cột.

Answer 2

Thử đặt chiều rộng và chiều cao cho vùng chứa của bạn. Khi bạn sử dụng layoutMode:'fitColumns', nó phải cung cấp cho tất cả các phần tử một thuộc tính nổi không còn lấp đầy vùng chứa.

Bạn cũng có thể muốn thiết resizesContainer:false