masonry + isotope + imagesLoaded not defined yii答案

【问题标题】：masonry + isotope + imagesLoaded not defined yiimasonry + isotope + imagesLoaded not defined yii
【发布时间】：2014-09-22 22:28:13
【问题描述】：

您好，我是 Web 开发的新手。我正在努力使用 Yii 1.1 的 JS 函数：isotope-jquery。试图显示一个无限滚动的砌体图像库。如果我保持原样，它可以工作，但是在使用图像时，它们最后都会重叠。我应该使用 imagesLoaded，但应用它很痛苦......

原码：

 $defaultCallback="
        function( newElements ) { 
        /* hide new items while they are loading*/ 
        var newElems = jQuery( newElements ); 
        \$isoContainer.isotope( 'appended', newElems, true );
        {$this->infiniteCallback}
        }";

修改：

function( newElements ) { 
        /* hide new items while they are loading*/ 
        var newElems = jQuery( newElements );
        \$newElems.imagesLoaded(function(){         
            \$isoContainer.masonry( 'insert', newElems);
        });
        {$this->infiniteCallback}
        }"

浏览器控制台出错：

["math:", 222, 2853] jquery.infinitescroll.js:171
["math:", 0, 2853] jquery.infinitescroll.js:171
["heading into ajax", Array[2]] jquery.infinitescroll.js:171
["Using HTML via .load() method"] jquery.infinitescroll.js:171
["contentSelector", div.items.isotope] jquery.infinitescroll.js:171
Uncaught ReferenceError: $newElems is not defined index.php?r=products:112(anonymous function) index.php?r=products:112opts.callback jquery.infinitescroll.js:159infscr_loadcallback jquery.infinitescroll.js:327infscr_ajax_callback jquery.infinitescroll.js:501jQuery.extend.each jquery.js:595jQuery.fn.jQuery.each jquery.js:241jQuery.ajax.complete jquery.js:7465fire jquery.js:974self.fireWith jquery.js:1084done jquery.js:7818callback

我已经尝试了几件事，定义内部变量，传递参数，但我无法让它工作......

可能是新手问题...

感谢您的帮助

【问题讨论】：

使用同位素还是砖石？您的更新代码有砖石
我正在使用（尝试）砌体布局模式，谢谢
您没有提供足够的信息来解决您的问题。您需要发布更多代码。更好的是，制作一个 jsfiddle。另外，您正在使用砖石，但您似乎正在加载同位素（？）["contentSelector", div.items.isotope]
好的，首先感谢您的帮助。创建一个 jsfiddle jsfiddle.net/avvn7fp6/1 关于砌体同位素问题，我正在使用 yii 框架并安装了 yii 扩展 yiiframework.com/extension/isotope-jquery，它可以让您选择砌体布局
您的小提琴对用户不友好！您需要将所有库（infinitescroll、bootstrap.js 等）添加为外部 CDN 资源，然后在 javascript 面板中添加您的特定代码。在你这样做之前，要涉水太多了。此外，您需要将 jQuery 设置为库而不是普通的 javascript。最后，如果您使用同位素，请不要使用砖石来调用它，$isoContainer.masonry( 'insert', newElems); 不同的库。

标签： javascript yii jquery-isotope yii-extensions masonry

【解决方案1】：

所以这就是解决方案，而且效果很好！

function( newElements ) { 
        /* hide new items while they are loading*/ 
        var newElems = jQuery( newElements );
        \$isoContainer.imagesLoaded(function(){         
        \$isoContainer.isotope( 'appended', newElems,true);
        });

感谢@Macsupport

【讨论】：