Jquery同位素：'width2'class打破剩余元素的布局

Question

我正在尝试使用 JQuery Isotope 来布置作为搜索查询结果的元素。这个想法是有一个 2 列布局，显示带有返回搜索项的小框。

除某一方面外，一切都很好。

当用户键入搜索词组并找到完全匹配项时，我的目标是让关联元素出现在顶部的 100%（1 列），并让其余项目继续其 50%（ 2列）之后的布局。但是，似乎完全匹配 (100%) 项会影响以下项的布局，导致它们以 50% 的宽度排成一列。

现在，当我进行搜索时，没有找到完全匹配的内容，2 列布局工作得很好。

有很多代码我会添加到这个post的底部，但我做了一个CodePen示例：http://codepen.io/anon/pen/pjKrpB

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

如能提供任何帮助，我们将不胜感激。几个小时以来，我一直在用头撞墙，我确信我忽略了一些简单的事情！

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

Jquery同位素：'width2'class打破剩余元素的布局

Jquery Isotope: 'width2' class breaks the layout of the remaining elements

jquery-isotope