同位素+調整大小+ imageLoaded

Question

你好幫手的:) 我已經實現了一個單一的WordPress頁面顯示在石工流體網格中的圖像，但我有一個問題，而在HTML5中調用視頻（只是與標籤：）。問題在於圖像與寬度完美協作：50％;身高：自動;並且只有當您調整屏幕大小以適應網格時，視頻纔會加載到砌體佈局中（與其他圖像重疊），但不適合砌體佈局。所以我想我可以通過將.imageLoaded（）插件添加到同位素調用中來解決它，但是當我的jQuery代碼如下所示時，我無法解決它：

真的非常感謝所有提前！

$（函數（）{

 var $container = $('#container'), 
     // create a clone that will be used for measuring container width 

      $containerProxy = $container.clone().empty().css({ visibility: 'hidden' }); 
     $checkboxes = $('#filters input'); 


     $container.after($containerProxy); 

     // get the first item to use for measuring columnWidth 
     var $item = $container.find('.item').not('.w2').eq(0); 

     $(window).smartresize(function() { 
      // calculate columnWidth 
      var colWidth = Math.floor($containerProxy.width()/4); 
      // set width of container based on columnWidth 
      $container.css({ 
       width: colWidth * 4 
      }) 
       .isotope({ 
        // other options... 
        // disable automatic resizing when window is resized 
        resizable: false, 
        // set columnWidth option for masonry 
        masonry: { 
         columnWidth: colWidth 
        } 
       }); 
      // trigger smartresize for first time 
     }).smartresize(); 

     $checkboxes.change(function(){ 
      var filters = []; 
      // get checked checkboxes values 
      $checkboxes.filter(':checked').each(function(){ 
       filters.push(this.value); 
      }); 
      // ['.red', '.blue'] -> '.red, .blue' 
      filters = filters.join(', '); 
      $container.isotope({ filter: filters }); 
     }); 



    }); 

Answer 1

請看下面的代碼：

$(function(){ 

    var $container = $('#container'), 
    // create a clone that will be used for measuring container width 

     $containerProxy = $container.clone().empty().css({ visibility: 'hidden' }); 
    $checkboxes = $('#filters input'); 


    $container.after($containerProxy); 

    // get the first item to use for measuring columnWidth 
    var $item = $container.find('.item').not('.w2').eq(0); 

    $(window).smartresize(function() { 
     // calculate columnWidth 
     var colWidth = Math.floor($containerProxy.width()/4); 
     // set width of container based on columnWidth 

     $container.imagesLoaded(function(){ //Add Imagesloaded here 


     $container.css({ 
      width: colWidth * 4 
     }) 
      .isotope({ 
       // other options... 
       // disable automatic resizing when window is resized 
       resizable: false, 
       // set columnWidth option for masonry 
       masonry: { 
        columnWidth: colWidth 
       } 
      }); 
     // trigger smartresize for first time 
    }).smartresize(); 

    $checkboxes.change(function(){ 
     var filters = []; 
     // get checked checkboxes values 
     $checkboxes.filter(':checked').each(function(){ 
      filters.push(this.value); 
     }); 
     // ['.red', '.blue'] -> '.red, .blue' 
     filters = filters.join(', '); 
     $container.isotope({ filter: filters }); 
    }); 

    }); //imagesloaded end 

    });