角同位素+同位素与我的网格不兼容

Question

我正在建造一个有角度的网站。在主页面和搜索结果页面中有一个像pinterest一样的食谱供稿，我使用jQuery isotope插件和angular-isotope指令，但我有2个问题/问题。

在主页面中，网格单元格没有固定的宽度，我使用了min-width css属性。

这是我的CSS：

.recipe {
    width: $grid-width;
    min-height: 325px;
    height: auto;
    margin: $margin-top 0 $margin-bottom $ditter;
    float: left;
    position: relative;

    border: 1px solid #C3C3C3;
    @include border-radius(0 0 5px 5px);

    .avatar {
        position: absolute;
        top: -15px;
        width: $grid-width;
        margin: 0 auto;
        img {
            display: block;
            margin: 0 auto;
        }
    }

    .image {
        width: $grid-width - 2px;
        margin: 0 auto;
        overflow-x: hidden;
        img {
            width: $grid-width;
            margin: 0 auto;
        }
    }

    .name {
        font-family: Times;
        font-size: 20px;
        font-style: italic;
        font-weight: bold;
        text-align: center;
    }

    .recipe-controls {
        width: $grid-width;
        .star {
            font-size: 30px;
            margin: 15px;
        }
    }
}

这是我的角度模板：

<div id="masonry" class="clearfix" isotope-container>
  <div isotope-item>
    ...
  </div>

  <div class="controls" isotope-item>
    ...
  </div>

  <div class="recipe" ng-repeat="recipe in recipes" isotope-item>
    <div class="avatar text-center">
        <a href="">
            <img class="img-circle" ng-src="http://graph.facebook.com/bruno.egermano/picture?type=normal" alt="">
        </a>
    </div>
    <div class="image">
        <a href="" ng-click="openRecipe(recipe.id)">
            <img ng-src="{{recipe.image}}" alt="{{recipe.name}}">
        </a>
    </div>
    <div class="name">
        <a href="" ng-click="openRecipe(recipe.id)">{{recipe.name}}</a>
    </div>
    <div class="recipe-controls">
        <i class="glyphicon  pull-right star" ng-class="{'glyphicon-star-empty': !recipe.star.stared, 'glyphicon-star': recipe.star.stared}">
            {{recipe.star.count}}
        </i>
    </div>
  </div>

那是我的剧本，圈子是我遇到的问题。

在第一个问题中。我究竟做错了什么？

第二个问题，在搜索结果页面中，我有一个过滤器，当用户更改其中一个时，我调用ajax请求并重新加载该集合。

当它发生时，同位素将所有物品放在一起，就像那样：

SCSS是相同的，HTML与其他问题非常相似。

Answer 1

我在第一个问题中发现了我的错误。

我忘了设置图像和容器的高度。

现在，我的SCSS看起来像这样：

.recipe {
    width: $grid-width;
    height: auto;
    margin: $margin-top 0 $margin-bottom $ditter;
    float: left;
    position: relative;

    border: 1px solid #C3C3C3;
    @include border-radius(0 0 5px 5px);

    .avatar {
        position: absolute;
        top: -15px;
        width: $grid-width;
        margin: 0 auto;
        img {
            display: block;
            margin: 0 auto;
        }
    }

    .image {
        width: $grid-width - 2px;
        height: 235px;
        margin: 0 auto;
        overflow-x: hidden;
        img {
            width: $grid-width;
            margin: 0 auto;
        }
    }

    .name {
        font-family: Times;
        font-size: 20px;
        font-style: italic;
        font-weight: bold;
        text-align: center;
    }

    .recipe-controls {
        width: $grid-width;
        .star {
            font-size: 30px;
            margin: 15px;
        }
    }
}

但第二个问题仍在发生。