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/

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

1 个答案: