jquery - 同位素 + 调整大小 + imageLoaded

Question

你好帮助者:)我已经实现了在一个 wordpress 页面上显示砖石流体网格中的图像，但是我在调​​用 HTML5 中的视频时遇到了问题(仅带有标签:)。问题是图像与 width: 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

   });