Jquery Isotope：'width2'类打破了其余元素的布局

Question

我试图使用JQuery Isotope来布局搜索查询结果的元素。我们的想法是使用2列布局显示返回搜索项的小框。

除了一个方面，一切都很有效。

当用户键入搜索短语并找到完全匹配时，我的目标是让关联元素显示在顶部的100％（1列），并让其余项目继续其50％（2列） ）之后的布局。但是，似乎完全匹配（100％）项目会抛弃以下项目的布局，导致它们在50％宽度的单列中排成一行。

现在，当我进行搜索时，找不到完全匹配，2列布局完全正常。

我将在本文的底部添加很多代码，但我制作了一个CodePen示例：http://codepen.io/anon/pen/pjKrpB

如果您在CSS中注释掉.grid-item--width2项的样式，或者只是从第一个grid-item--width2元素中删除grid-item类，您将看到正确的布局。

非常感谢能提供的任何帮助。我一直在墙上撞了几个小时，我确信有一些简单的东西我可以俯视！

PS - 如果认为它是相关的，我也使用BOOTSTRAP。

谢谢大家！

HTML

<div class="text-center" style="margin: 20px;">
  <div>Filter Search Results:</div>
  <div class="btn btn-md btn-primary" onclick="$grid.isotope({ filter: '.grid-item' });">All</div>
  <div style="display: none;" class="system btn btn-md btn-primary" onclick="$grid.isotope({ filter: '.system' });">Systems</div>
  <div style="display: none;" class="part btn btn-md btn-primary" onclick="$grid.isotope({ filter: '.part' });">Inventory Items</div>
  <div style="display: none;" class="specsheet btn btn-md btn-primary" onclick="$grid.isotope({ filter: '.specsheet' });">Spec. Sheets</div>
  <div style="display: none;" class="diagram btn btn-md btn-primary" onclick="$grid.isotope({ filter: '.diagram' });">Wiring/Diagrams</div>
</div>

<div class='row' id='schresults' style='margin:0 15px;'>
  <div class='grid-item grid-item--width2 part'>
    <div class='grid-item-body'>
      <div class='row exact'>
        <div class='col-xs-2 col-sm-3 text-center'>
          <img class='img-responsive md' src='http://dummyimage.com/600x400/000/fff' style='margin:0 auto;'>

          <div style='margin-top:15px;font-size:1.2em'>
            <span class='label bg-red'>100%</span>
          </div>
        </div>


        <div class='col-xs-10 col-sm-9'>
          <h2>Exact Match!</h2>
          <a href='#'><b>Inventory Item Title</b></a>
          <br>
          <small>Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description </small>

          <div class="row" style="margin:20px 0;">
            <div class="col-md-12 text-left">
              <a class="btn btn-lg btn-success btn-lg" href='#' style="color: #fff;margin:0;"><i class='fa-arrow-circle-o-right fa'
                                            style=
                                            "margin-right: 15px;"></i> View
                This Part</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class='grid-item part'>
    <div class='grid-item-body'>
      <div class='row'>
        <div class='col-xs-2 col-sm-3 text-center'>
          <img class='img-responsive' src='http://dummyimage.com/600x400/000/fff' style='margin:0 auto;'>

          <div style='margin-top:15px;font-size:1.2em'>
            <span class='label bg-orange'>77%</span>
          </div>
        </div>


        <div class='col-xs-10 col-sm-9'>
          <a href='#'><b>Inventory Item Title</b></a>
          <br>
          <small>Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description </small>
        </div>
      </div>
    </div>
  </div>


  <div class='grid-item specsheet'>
    <div class='grid-item-body'>
      <div class='row'>
        <div class='col-xs-2 col-sm-3 text-center'>
          <img class='img-responsive' src='http://dummyimage.com/600x400/000/fff' style='margin:0 auto;'>

          <div style='margin-top:15px;font-size:1.2em'>
            <span class='label bg-gray'>28%</span>
          </div>
        </div>


        <div class='col-xs-10 col-sm-9'>
          <a href='#'><b>Spec. Sheet Title</b></a>
          <br>
          <small>Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description </small>
        </div>
      </div>
    </div>
  </div>


  <div class='grid-item diagram'>
    <div class='grid-item-body'>
      <div class='row'>
        <div class='col-xs-2 col-sm-3 text-center'>
          <img class='img-responsive' src='http://dummyimage.com/600x400/000/fff' style='margin:0 auto;'>

          <div style='margin-top:15px;font-size:1.2em'>
            <span class='label bg-gray'>27%</span>
          </div>
        </div>


        <div class='col-xs-10 col-sm-9'>
          <a href='#'><b>Wiring Diagram Title</b></a>
          <br>
          <small>Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description </small>
        </div>
      </div>
    </div>
  </div>


  <div class='grid-item diagram'>
    <div class='grid-item-body'>
      <div class='row'>
        <div class='col-xs-2 col-sm-3 text-center'>
          <img class='img-responsive' src='http://dummyimage.com/600x400/000/fff' style='margin:0 auto;'>

          <div style='margin-top:15px;font-size:1.2em'>
            <span class='label bg-gray'>25%</span>
          </div>
        </div>


        <div class='col-xs-10 col-sm-9'>
          <a href='#'><b>Wiring Diagram Title</b></a>
          <br>
          <small>Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description </small>
        </div>
      </div>
    </div>
  </div>


  <div class='grid-item diagram'>
    <div class='grid-item-body'>
      <div class='row'>
        <div class='col-xs-2 col-sm-3 text-center'>
          <img class='img-responsive' src='http://dummyimage.com/600x400/000/fff' style='margin:0 auto;'>

          <div style='margin-top:15px;font-size:1.2em'>
            <span class='label bg-gray'>25%</span>
          </div>
        </div>


        <div class='col-xs-10 col-sm-9'>
          <a href='#'><b>Wiring Diagram Title</b></a>
          <br>
          <small>Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description </small>
        </div>
      </div>
    </div>
  </div>


  <div class='grid-item diagram'>
    <div class='grid-item-body'>
      <div class='row'>
        <div class='col-xs-2 col-sm-3 text-center'>
          <img class='img-responsive' src='http://dummyimage.com/600x400/000/fff' style='margin:0 auto;'>

          <div style='margin-top:15px;font-size:1.2em'>
            <span class='label bg-gray'>25%</span>
          </div>
        </div>


        <div class='col-xs-10 col-sm-9'>
          <a href='#'><b>Wiring Diagram Title</b></a>
          <br>
          <small>Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description </small>
        </div>
      </div>
    </div>
  </div>


  <div class='grid-item diagram'>
    <div class='grid-item-body'>
      <div class='row'>
        <div class='col-xs-2 col-sm-3 text-center'>
          <img class='img-responsive' src='http://dummyimage.com/600x400/000/fff' style='margin:0 auto;'>

          <div style='margin-top:15px;font-size:1.2em'>
            <span class='label bg-gray'>20%</span>
          </div>
        </div>


        <div class='col-xs-10 col-sm-9'>
          <a href='#'><b>Wiring Diagram Title</b></a>
          <br>
          <small>Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description </small>
        </div>
      </div>
    </div>


    <div class='grid-item system'>
      <div class='grid-item-body'>
        <div class='row'>
          <div class='col-xs-2 col-sm-3 text-center'>
            <img class='img-responsive' src='http://dummyimage.com/600x400/000/fff' style='margin:0 auto;'>

            <div style='margin-top:15px;font-size:1.2em'>
              <span class='label bg-gray'>8%</span>
            </div>
          </div>


          <div class='col-xs-10 col-sm-9'>
            <a href='#'><b>System Title</b></a>
            <br>
            <small>Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description </small>
          </div>
        </div>
      </div>
    </div>


    <div class='grid-item system'>
      <div class='grid-item-body'>
        <div class='row'>
          <div class='col-xs-2 col-sm-3 text-center'>
            <img class='img-responsive' src='http://dummyimage.com/600x400/000/fff' style='margin:0 auto;'>

            <div style='margin-top:15px;font-size:1.2em'>
              <span class='label bg-gray'>8%</span>
            </div>
          </div>


          <div class='col-xs-10 col-sm-9'>
            <a href='#'><b>System Title</b></a>
            <br>
            <small>Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description </small>
          </div>
        </div>
      </div>
    </div>


    <div class='grid-item specsheet'>
      <div class='grid-item-body'>
        <div class='row'>
          <div class='col-xs-2 col-sm-3 text-center'>
            <img class='img-responsive' src='http://dummyimage.com/600x400/000/fff' style='margin:0 auto;'>

            <div style='margin-top:15px;font-size:1.2em'>
              <span class='label bg-gray'>8%</span>
            </div>
          </div>


          <div class='col-xs-10 col-sm-9'>
            <a href='#'><b>Spec. Sheet Title</b></a>
            <br>
            <small>Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description </small>
          </div>
        </div>
      </div>
    </div>
  </div>

CSS

body{background:#aaa;}

.grid-item {
  float: left;
  width: 50%;
  height: auto;
  background:#ff0;
}

.grid-item--width2 {
   width: 100%;
}

.grid-item-body {
  margin: 6px;
  padding: 15px;
  background: #fff;
  border: 1px solid #333;
  border-color: hsla(0, 0%, 0%, 0.7);
}

的Javascript

var $grid = null;
$(document).ready(function() {
  $grid = $('#schresults');    
  $grid.isotope({
      itemSelector: '.grid-item',
      layoutMode: 'masonry'
    });         

    if ($('.grid-item.part').length>0) $('.btn.part').show();
    if ($('.grid-item.specsheet').length>0) $('.btn.specsheet').show();
    if ($('.grid-item.diagram').length>0) $('.btn.diagram').show();
    if ($('.grid-item.system').length>0) $('.btn.system').show();

}); 

Answer 1

以下更改应该修复

var $grid = null;
$(document).ready(function() {
    $grid = $('#schresults');
    $grid.isotope({
        itemSelector: '.grid-item',
        masonry: {
            columnWidth: '.grid-sizer'
        }
    });
});

如果未设置columnWidth，Isotope将使用第一个项目的外部宽度。

添加css块

.grid-sizer {
  width: 50%;
}

.grid-sizer空元素，仅用于元素大小调整应在 #schresults

下

<div class="grid-sizer"></div>

http://isotope.metafizzy.co/layout-modes/masonry.html#columnwidth

示例：http://codepen.io/anon/pen/GpwerG