同位素/砖石型插件，用于引导3和不同的网格宽度

Question

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

我正在使用引导3，我想要一个可排序的基于网格的新闻部分(比如pinterest) --区别是我想要两种不同类型的网格宽度。我的默认网格宽度是‘col 4’(相当于33.33333%的宽度)，然后是一个“功能网格宽度‘col 8”。这些列也会有不同的高度，我希望它们相互叠在一起(比如pinterest)。

我认为这很简单，但我尝试过的每一种方法都有效，但在功能网格大小下留下了很大的垂直缺口，或者完全破坏了它。

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

因此，如果我的所有网格项都是相同宽度(工作正常)：http://jsfiddle.net/JR3gu/，则这是同位素工作。

这就是当我添加我的“特色”-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/