同位素+调整大小+ 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 

    });