css - woomark 无限画廊与 bootstrap.css 冲突

Question

我正在使用带有 JADE 和 EXPRESS 的 GBKS woodmark jquery 无限画廊插件。

我也在使用 bootstrap css，显然与 bootstrap.css 存在冲突，导致 woomark 使用的绝对定位在加载时失败。

主要问题是引导程序在ul中的li的绝对定位覆盖了woomark画廊插件的ul中li的绝对定位。

有一个临时解决方案，即在站点加载几毫秒后再次调用该方法以重新定位站点，但我认为这不是一个好主意。

Answer 1

问题不是与引导程序冲突，而是 wookmark 在加载图像之前不知道图像的高度。为了修复它：

1. 添加加载图像的 JS 插件 - https://github.com/desandro/imagesloaded

2. 修改 wookmark 代码，使其在加载所有图像之前不会触发：

   <!-- Once the images are loaded, initalize the Wookmark plug-in. -->
     <script type="text/javascript">
   $('#tiles').imagesLoaded(function() {
     // 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: 2, // Optional, the distance between grid items
       itemWidth: 210 // Optional, the width of a grid item
     };
   
     // Get a reference to your grid items.
     var handler = $('#tiles li');
   
     // 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();
     });
   });