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 templateタグ付き）。問題が発生した場合（機能しなかった場合）に備えて、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 に答える