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（）;

Answer 2

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

E.g。

float:left;

或..

display:inline-block;