Question

我正在尝试使用Zurb Foundation均衡器插件进行下面的网格布局：

 <div class="row eq-height" data-equalizer>

    <div class="medium-3 columns" data-equalizer-watch>
        <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x1200')"> <img class="img-responsive" src="http://placehold.it/800x1240" alt=""> </a>
    </div>

    <div class="medium-6 columns" data-equalizer-watch>
        <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x603" alt=""> </a>
    </div>

    <div class="medium-3 columns" data-equalizer-watch>
        <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
        <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
    </div>

</div>

我已加载插件：

<!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css">

<!-- Compressed JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>

<!-- https://cdnjs.com/libraries/foundation/6.3.0 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/plugins/foundation.equalizer.js"></script>

并调用插件：

<script>
  $(function() {
    $(document).foundation('equalizer', 'reflow');
  });
</script>

但我得到了这个错误：

Uncaught ReferenceError: We're sorry, 'equalizer' is not an available method for this element.
    at r.fn.init.a [as foundation] (foundation.min.js:1)
    at HTMLDocument.<anonymous> (cdn.html:112)
    at j (jquery.min.js:2)
    at k (jquery.min.js:2)

我错过了哪些想法？

Answer 1

尝试使用$(document).foundation();来定义基础。

使用$(document).foundation('equalizer', 'reflow');您尝试刷新均衡器，但您尚未定义。

Zurb Foundation均衡器插件 - '均衡器'不是这个元素的可用方法吗？

1 个答案: