同位素+调整大小+图像

Question

您好，助手们:)我已经实现了一个单一的wordpress页面，该页面显示了砌体流体网格中的图像，但是在用HTML5调用视频时遇到了一个问题（仅带有标签：）。 问题是图像在宽度为50％时可以完美地工作； 高度：自动； 并且仅当您调整屏幕大小时，视频才加载到中，但不适合砌体布局（它与其他图像重叠）。 所以我想我可以通过将.imageLoaded（）插件添加到isotope调用中来解决它，但是我无法确定何时我的jQuery代码如下：

真的非常感谢大家！

$（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.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

   });