jQuery的同位素 - 中心和流體/響應

Question

我問一個問題，關於Isotope

這是jQuery的一個偉大的插件。

我一直在玩它一段時間，但我不知道JavaScript的結合兩個同位素技術，responsive Isotope和centered Isotope。

我已經成功地使用了響應式模塊，它工作得很好，除了現在我需要將整個事件集中在一個div中。居中的佈局模式沒有記錄以及響應模式，所以我有一些麻煩讓它工作。基本上，居中佈局模式的內容爲：

要使用此mod，請複製演示者頁面源中找到的修改過的方法。

不幸的是，在視圖源中有各種各樣的javascript事件，我沒有足夠的JavaScript經驗來挑選它，並將它與我已經有工作的響應腳本結合起來。

任何幫助將不勝感激。

A site with a working example of what I need.

My site that I am experimenting with.

在Firefox更好，我覺得。

Answer 1

這裏是由David DeSandro自己提供了一個例子：

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

Answer 2

嘗試使用上爲每個類的子內容的CSS文件的轉換。它應該是有益的，它可以更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; 

希望這方面的工作

Answer 3

這的jsfiddle可能會解決你的問題：http://jsfiddle.net/schmidjon/6Z3sn/。 這是一個簡單的擴展與斷點同位素：

(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)); 

來源：​​