1

我正在建立一个有角度的网站。在主页和搜索结果页面中有一个像 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>

那是我的屏幕截图，圆圈是我遇到的问题。 同位素问题1

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

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

当它发生时，同位素将所有物品放在一起，就像这样： 屏幕截图 2013-09-12 在 14 38 55

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

4

1 回答 1

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

但第二个问题仍在发生。

于 2013-09-12T20:59:47.097 回答