Đồng vị jQuery - Căn giữa và chất lỏng/đáp ứng

Question

Tôi đang đặt câu hỏi về Isotope

Đây là một plugin tuyệt vời cho jQuery.

Tôi đã chơi với nó một lúc rồi, nhưng tôi không biết đủ về javascript để kết hợp hai kỹ thuật đồng vị, responsive Isotope và centered Isotope.

Tôi đã sử dụng thành công mod đáp ứng và nó hoạt động khá tốt, ngoại trừ bây giờ tôi cần căn giữa toàn bộ điều trong div. Chế độ bố cục trung tâm không được ghi lại cũng như chế độ đáp ứng, vì vậy tôi gặp phải một số vấn đề khi chế độ này hoạt động. Về cơ bản, các hạn chế cho chế độ bố cục trung tâm là:

Để sử dụng mod này, hãy sao chép các phương pháp đã sửa đổi được tìm thấy trong nguồn trang của trình diễn.

Thật không may, có tất cả mọi thứ javascript đang diễn ra trong nguồn chế độ xem và tôi không có đủ kinh nghiệm với javascript để chọn và cũng kết hợp nó với tập lệnh đáp ứng mà tôi đã làm việc.

Mọi trợ giúp sẽ được đánh giá cao.

A site with a working example of what I need.

My site that I am experimenting with.

trình tốt hơn trong Firefox tôi nghĩ.

Answer 1

Dưới đây là một ví dụ được cung cấp bởi David DeSandro mình:

http://jsfiddle.net/desandro/P6JGY/6/

Answer 2

hãy thử sử dụng quá trình chuyển đổi trong hồ sơ css của bạn cho mỗi lớp học của bạn về nội dung trẻ em. nó sẽ hữu ích và nó có thể có nhiều slowmo

.css

-webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 

niềm hy vọng này làm việc

Answer 3

jsfiddle Điều này có lẽ sẽ giải quyết vấn đề của bạn: http://jsfiddle.net/schmidjon/6Z3sn/. Đó là một phần mở rộng đơn giản để đồng vị với breakpoint:

(function ($) { 
var $container = $('.example'), 
    colWidth = function() { 
     var w = $container.width(), 
      columnNum = 1, 
      columnWidth = 0; 
     if (w > 1200) { 
      columnNum = 5; 
     } else if (w > 900) { 
      columnNum = 4; 
     } else if (w > 600) { 
      columnNum = 3; 
     } else if (w > 300) { 
      columnNum = 2; 
     } 
     columnWidth = Math.floor(w/columnNum); 
     $container.find('.item').each(function() { 
      var $item = $(this), 
       multiplier_w = $item.attr('class').match(/item-w(\d)/), 
       multiplier_h = $item.attr('class').match(/item-h(\d)/), 
       width = multiplier_w ? columnWidth*multiplier_w[1]-4 : columnWidth-4, 
       height = multiplier_h ? columnWidth*multiplier_h[1]*0.5-4 : columnWidth*0.5-4; 
      $item.css({ 
       width: width, 
       height: height 
      }); 
     }); 
     return columnWidth; 
    }, 
    isotope = function() { 
     $container.isotope({ 
      resizable: false, 
      itemSelector: '.item', 
      masonry: { 
       columnWidth: colWidth(), 
       gutterWidth: 4 
      } 
     }); 
    }; 
    isotope(); 
    $(window).smartresize(isotope); 
}(jQuery)); 

Nguồn: Using jQuery Isotope for masonry in fluid layouts