woomark無限畫廊與bootstrap.css

Question

我使用玉和表達GBKS是Woodmark無限的jQuery插件畫廊衝突。

我也是用引導CSS，顯然有與bootstrap.css的衝突，使得由woomark使用絕對定位失敗的onload。

的主要問題是，李在被引導的UL絕對定位是在寫作裏的絕對定位在woomark畫廊插件的UL認證。

還有的只是再次調用該方法來重新定位站點的站點加載後幾毫秒的暫時解決，但我不認爲這是一個好主意。

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(); 
       }); 
   });