css - bootstrap.cssと衝突するwoomark無限ギャラリー

Question

JADEとEXPRESSでGBKSウッドマークjquery無限ギャラリープラグインを使用しています。

私もブートストラップcssを使用していますが、bootstrap.cssとの衝突があり、woomarkが使用する絶対位置がオンロードに失敗するようです。

主な問題は、ブートストラップによるul内のliの絶対位置が、woomarkgalleryプラグインのul内のliの絶対位置を上書きしていることです。

サイトが読み込まれてから数ミリ秒後にサイトを再配置するためにメソッドを再度呼び出すという一時的な解決策がありますが、それは良い考えではないと思います。

Answer 1

問題はブートストラップとの衝突ではなく、wookmark が画像をロードする前に画像の高さを認識していないことです。それを修正するには：

1. Images Loaded 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();
     });
   });