與引導程序3和不同網格寬度一起工作的同位素/砌體類型插件

Question

我很難讓我的Isotope插件正常工作。我嘗試了很多不同的東西，但我現在已經回到了開始。

我使用引導程序3，我想要一個可排序的基於網格的新聞部分（如pinterest） - 不同的是我想要兩種不同類型的網格寬度。我的默認網格寬度爲'col-sm-4'（相當於33.33333％寬度），然後是'精選'網格寬度'col-sm-8'。這些柱子也會有不同的高度，我希望它們在彼此之下堆疊（如pinterest）。

我認爲這會很簡單，但是我嘗試過的一切都可以工作，但是在特色網格大小下留下了大的垂直間隙或者完全打破了它。

我想知道是否有其他人必須做類似的事情，如果他們設法讓它工作，因爲它應該。

所以這是同位素，如果我所有的網格項目是相同的寬度工作（正常工作）： http://jsfiddle.net/JR3gu/

這是當我加入我的「特色」 COL-SM-8格（休息時間）會發生什麼： http://jsfiddle.net/JR3gu/1/

我已經使用這個插件（sloppyMasonry）試過，但沒有用，要麼運氣： https://github.com/cubica/isotope-sloppy-masonry

我的代碼：

<div class="container"> 
    <div class="row"> 
    <div class="col-md-12">    
     <div class="row iso"> 
     <div class="col-sm-8 iso-item" style="padding-bottom: 20px;"> 
      <div class="item"> 
      <p>The quick brown fox jumped over the lazy dog.</p> 
      </div> 
     </div> 
     <div class="col-sm-4 iso-item" style="padding-bottom: 20px;"> 
      <div class="item"> 
      <p>The quick brown fox jumped over the lazy dog.</p> 
      </div> 
     </div> 
     <div class="col-sm-4 iso-item" style="padding-bottom: 20px;"> 
      <div class="item"> 
      <p>The quick brown fox jumped over the lazy dog.</p> 
      </div> 
     </div> 
     <div class="col-sm-4 iso-item" style="padding-bottom: 20px;"> 
      <div class="item"> 
      <p>The quick brown fox jumped over the lazy dog.</p> 
      </div> 
     </div> 
     <div class="col-sm-4 iso-item" style="padding-bottom: 20px;"> 
      <div class="item"> 
      <p>The quick brown fox jumped over the lazy dog.</p> 
      </div> 
     </div> 
     <div class="col-sm-4 iso-item" style="padding-bottom: 20px;"> 
      <div class="item"> 
      <p>The quick brown fox jumped over the lazy dog.</p> 
      </div> 
     </div>    
     </div> 
    </div> 
    </div> 
</div> 

jQuery的

$(document).ready(function() { 
    var $container = $('.iso'); 
    $container.imagesLoaded(function(){ 
     $container.isotope({ 
      resizable: true, 
      layoutMode : 'masonry', 
      itemSelector : '.iso-item' 
     }); 
    }); 
}); 

Answer 1

所以我設法得到它的工作（主要是）如何，我想它。我不得不在最後刪除行內的引導網格。它遠非完美，但比以前好了很多。希望這可以幫助某人。

<div class="row"> 
    <div class="iso">   
     <div class="item large"> 
      <div> 
       <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </p> 
      </div>     
     </div> 
     <div class="item"> 
      <div> 
       <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </p> 
      </div>        
     </div> 
     <div class="item"> 
      <div> 
       <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </p> 
      </div>         
     </div> 
     <div class="item">         
      <div> 
       <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </p> 
      </div>        
     </div> 
    </div> 
</div> 

CSS

.item { width: 33%; margin-bottom: 15px; padding: 15px; box-sizing: border-box; } 
.item.large{ width: 66%; } 
.item > div { color: #fff; background-color: #000; padding: 20px; } 

的jQuery（同位素）

var $container = $('.iso'); 
$container.imagesLoaded(function(){ 
    $container.isotope({ 
     masonry: { 
      gutter: 0, 
      itemSelector: '.item', 
      columnWidth: 3 
     }, 
     filter: '*' 
    }); 
}); 

我然後用於當我到移動媒體查詢和設置都.item和.item.large到寬度：100％。

小提琴：http://jsfiddle.net/JR3gu/3/