Jquery 同位素/砌体类型插件，可与Bootstrap 3和不同的网格宽度一起使用

我很难让同位素插件正常工作。我尝试过很多不同的事情，但现在我已经回到了开始

我使用的是Bootstrap3，我想要一个可排序的基于网格的新闻部分（比如pinterest）——区别在于我想要两种不同类型的网格宽度。我的默认网格宽度是“col-sm-4”（相当于33.33333%的宽度），然后是“特色”网格宽度“col-sm-8”。这些柱子的高度也会有所不同，我希望它们彼此堆叠在一起（比如pinterest）

我认为这很简单，但我尝试过的方法要么有效，要么在特征网格大小下留下一个很大的垂直间隙，要么完全破坏它

我想知道是否有其他人也做过类似的事情，他们是否设法让它正常工作

因此，如果我的所有网格项都具有相同的宽度（工作正常），则这是可行的：

这是当我添加我的“特色”col-sm-8网格（中断）时发生的情况：

我尝试过使用这个插件（SloppyMashine），但也没有太多运气：

我的代码：

<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>

---

因此，我设法使它（大部分）按我所希望的方式工作。最后，我不得不移除行中的引导网格。这还远远不够完美，但比以前好多了。希望这对别人有帮助

 <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>

jQuery（使用同位素）

然后，当我开始使用移动设备时，我使用了一个媒体查询，并将.item和.item.large设置为宽度：100%

小提琴：

 <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>

.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; } 

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