javascript - Wookmark js不创建列

我正在尝试使用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%;
}

最佳答案

您似乎正在尝试调用一个不存在的“ imagesLoaded（）”函数。这可能是您需要的：https://gist.github.com/797120。

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

$（'＃tiles li'）。wookmark（）;

关于javascript - Wookmark js不创建列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22329706/