javascript - Wookmark js 不创建列

Question

我正在尝试使用 wookmark jqquery 插件来创建类似图表布局的 pinterest。但是，Wookmark 并未在 li 中创建列。它只是在另一个下创建图像。如图所示:

这是我的代码:

<script src={% static "js/jquery-1.7.2.min.js" %}></script>
  <script src={% static "js/jquery.wookmark.js" %}></script>





<script type="text/javascript">
    (function ($) {
      var loadedImages = 0, // Counter for loaded images
          handler = $('#tiles li'); // Get a reference to your grid items.
      // Prepare layout options.
      var options = {
        autoResize: true, // This will auto-update the layout when the browser window is resized.
        container: $('#main'), // Optional, used for some extra CSS styling
        offset: 5, // Optional, the distance between grid items
        outerOffset: 10, // Optional, the distance to the containers border
        itemWidth: 210 // Optional, the width of a grid item
      };

      $('#tiles').imagesLoaded(function() {
        // Call the layout function.
        handler.wookmark(options);

        // Capture clicks on grid items.
        handler.click(function(){
          // Randomize the height of the clicked item.
          var newHeight = $('img', this).height() + Math.round(Math.random() * 300 + 30);
          $(this).css('height', newHeight+'px');

          // Update the layout.
          handler.wookmark();
        });
      }).progress(function(instance, image) {
        // Update progress bar after each image load
        loadedImages++;
        if (loadedImages == handler.length)
          $('.progress-bar').hide();
        else
          $('.progress-bar').width((loadedImages / handler.length * 100) + '%');
      });
    })(jQuery);
  </script>

HTML:

 <ul id="tiles">
 <li><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Fruit_Stall_in_Barcelona_Market.jpg/1200px-Fruit_Stall_in_Barcelona_Market.jpg" alt=""></li>
 <li><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Mixed_fruit.jpg/1200px-Mixed_fruit.jpg" alt=""></li>
 <li><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Culinary_fruits_front_view.jpg/1200px-Culinary_fruits_front_view.jpg" alt=""></li>
 <li><img src="http://upload.wikimedia.org/wikipedia/commons/5/5e/Nectarine_Fruit_Development.jpg" alt=""></li>
 <li><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Fruit_Stall_in_Barcelona_Market.jpg/1200px-Fruit_Stall_in_Barcelona_Market.jpg" alt=""></li>
 <li><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Mixed_fruit.jpg/1200px-Mixed_fruit.jpg" alt=""></li>
 <li><img src="http://upload.wikimedia.org/wikipedia/commons/5/5e/Nectarine_Fruit_Development.jpg" alt=""></li>
 </ul>

CSS:

#tiles {
    width: 100%;
}

#tiles li {
    width: 25%;
}

Answer 1

看起来您正在尝试调用不存在的“imagesLoaded()”函数。这可能是您需要的:https://gist.github.com/797120 .

要使用默认选项调用 wookmark(用于测试或入门)，请将您的 javascript 替换为:

$('#tiles li').wookmark();