Javascript 角同位素+；同位素don'；t与我的网格配合得很好

我正在建立一个有角度的网站。在主页和搜索结果页面有一个菜谱提要，就像pinterest一样，我使用jQuery插件和指令，但我有两个问题

在主页a中，网格单元格没有固定的宽度，我使用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>

...
...
{{recipe.star.count}

这是我的截图，圆圈是我遇到的问题。

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

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

当它发生时，同位素将所有的项目放在另一个项目上，如下所示：

---

SCS是相同的，HTML与另一个问题非常相似。

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

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

现在，我的SCS看起来是这样的：

.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;
        }
    }
}

---

但是第二个问题仍然在发生。

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

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

现在，我的SCS看起来是这样的：

.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;
        }
    }
}

但第二个问题仍在发生