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>

---

我不熟悉Wookmark，但您可能应该尝试浮动元素或在样式表中将它们显示为内联块

例如

或者

---

看起来您正试图调用一个不存在的“imagesLoaded（）”函数。这可能是您需要的：

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

$（'tiles li'）.wookmark（）

 <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>

#tiles {
    width: 100%;
}

#tiles li {
    width: 25%;
}

float:left;

display:inline-block;