Question

你好助手们:) 我已经实现了一个wordpress页面显示砌体流体网格中的图像，但我在HTML5中调用视频时遇到问题（只需使用标签:)。问题是图像与宽度完美配合：50％;身高：自动;当你调整屏幕大小适合网格时，视频加载到with中但不适合砌体布局（它与其他图像重叠）。所以我想我可以通过在同位素调用中添加.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

   });

同位素+调整大小+ imagesLoaded

1 个答案: