0

jQuery Masonry 不适用于 Django 模板标签，如下所示：

{% for memes in memes %}
      <div class="masonryImage">
        <img src="{{ MEDIA_URL }}/{{ image.image }}" id="{{ image.pk }}"/>
      <div>
    {% endfor %}

当拼写 div 时，我设置了一个相同的实例：

<div class="masonryImage">
  <img src="/static/media/images/2012/1018/inspirational-quote-michelangelo-sunrise.jpg" alt="" />
</div>

<div class="masonryImage">
  <img src="/static/media/images/2012/1018/inspirationalpercent20quotespercent204_4341.jpg" alt="" />
</div>

我的 JS：

  <script>
$(function(){

var $container = $('#container');

$container.imagesLoaded( function(){
  $container.masonry({
    itemSelector : '.masonryImage'
  });
});

});
</script>

这是呈现的 HTML（带有 for 模板标签）。我曾尝试删除 id，以防万一出现问题（没有用）：

<div id="container">

      <div class="masonryImage">
        <img src="/static/media/images/2012/1018/inspirational-quote-michelangelo-sunrise.jpg" id="9"/>
      <div>

      <div class="masonryImage">
        <img src="/static/media/images/2012/1018/inspirationalpercent20quotespercent204_4341.jpg" id="7"/>
      <div>

      <div class="masonryImage">
        <img src="/static/media/images/2012/1018/002.gif" id="6"/>
      <div>

      <div class="masonryImage">
        <img src="/static/media/images/2012/1018/tumblr_mc1jac0bkn1rnn6wqo1_500.png" id="4"/>
      <div>

      <div class="masonryImage">
        <img src="/static/media/images/2012/1018/inspirational-quotes30.jpg" id="2"/>
      <div>

      <div class="masonryImage">
        <img src="/static/media/images/2012/1018/inspirational-quotes20.jpg" id="1"/>
      <div>

</div>

更新 我尝试将 {% for %} 图像放在同一个容器下，然后添加“拼写”div。这会导致 {% for %} 图像垂直渲染（没有砖石），拼写出来的 div 用砖石渲染。

有没有更好的方法来制作模板并让 jQuery Masonry 工作？

4

1 回答 1

1

愚蠢的错误，

我进入 jQuery 并打印出控制台日志。问题是我错过了 div 中的尾随 /。

面掌。

于 2012-10-19T06:11:47.047 回答