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

Question

我很难让我的Isotope插件正常工作.我尝试过很多不同的东西,但现在我已经回到了开始阶段.

我正在使用bootstrap 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/