Question

我的javascript中有一个语法错误似乎正在滑落。我可以通过文件访问内容到胡子模板，或者我可以硬编码项目（图像和音频），并让项目顺利填满masonryjs页面。但是当我尝试添加两者时，其中一个或两个都不起作用。这是我的CodePen

我期望发生的事情是让我的页面从文档生成我的胡子模板。但它应该像Pinterest这样的网站顺利堆叠，因为我使用了masonryjs，图像平铺得很整齐。

以下是与Masonry一起使用的代码

HTML

<div id="content" class="container clearfix">

  <div class="item">
    <img src="http://assets.wtfisthat.info/img/1.JPG" alt="" />
    <audio controls>
      <source src="http://assets.wtfisthat.info/audio/1.wav">
    </audio>
  </div>

  <div class="item">
    <img src="http://assets.wtfisthat.info/img/2.JPG" alt="" />
    <audio controls>
      <source src="http://assets.wtfisthat.info/audio/2.wav">
    </audio>
  </div>

  <div class="item">
    <img src="http://assets.wtfisthat.info/img/3.JPG" alt="" />
    <audio controls>
      <source src="http://assets.wtfisthat.info/audio/3.wav">
    </audio>
  </div>

  <div class="item">
    <img src="http://assets.wtfisthat.info/img/4.JPG" alt="" />
    <audio controls>
      <source src="http://assets.wtfisthat.info/audio/4.wav">
    </audio>
  </div>
<!-- The rest of the items handcoded -->
</div> <!--/ #container -->

JS

$(document).ready(function() {

  // Initialize Masonry
  $('#content').masonry({
    columnWidth: 320,
    itemSelector: '.item',
    isFitWidth: true,
    isAnimated: !Modernizr.csstransitions
  }).imagesLoaded(function() {
      $(this).masonry('reload');
    });

});

但是当我添加胡子以便它不是手动编码时，它就失败了。我试过这个

HTML

<div id="content" class="container clearfix">
  <div id="image-list"></div>


  <script id="imgtpl" type="text/template">
    {{#images}}
      <div class="item">
        <img src="http://assets.wtfisthat.info/img/{{img}}" alt="{{alt}}">
        <audio controls>
          <source src="http://assets.wtfisthat.info/audio/{{id}}.wav">
        </audio>
      </div>
    {{/images}}
  </script>
</div> <!--/ #container -->

JS

// Streams in the data from the JSON file
$(function() {
  $.getJSON('https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/img.js',   function(data) {
    var template = $('#imgtpl').html();
    var html = Mustache.to_html(template, data);
    $('#image-list').html(html);
  });
});

$(document).ready(function() {

  // Initialize Masonry
  $('#content').masonry({
    columnWidth: 320,
    itemSelector: '.item',
    isFitWidth: true,
    isAnimated: !Modernizr.csstransitions
  }).imagesLoaded(function() {
    $(this).masonry('reload');
  });

});

Answer 1

在这里解决：setdefault

我已经更改了您的代码，以便将新元素附加到现有元素，而不是将它们推送到自己的div中。

然后，您应该在添加元素后使用masonry('appended', $elements)，如本页所述：http://codepen.io/anon/pen/MwJXpW。

以下是修改过的脚本：

$.getJSON('https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/img.js', function(data) {
    var template = $('#imgtpl').html();
    var html = Mustache.to_html(template, data);
    var $html = $(html)
    $('#content').append($html).masonry( 'appended', $html); 
  });

masonryjs和mustachejs之间的冲突

HTML

JS

HTML

JS

1 个答案: