Question

我使用jQuery插件（http://tympanus.net/codrops/2011/08/30/automatic-image-montage/）来显示div中的图像。它工作正常。但。当我用ajax将新图像加载到这个div中时，它什么也没做。

我认为问题在于：

(function( window, $, undefined ) {

这是我的ajax电话（抱歉，我忘了）：

$('#albums').live('click', function() {
$('#left_col div').hide();
$.ajax({
    url: document.base_url + 'welcome/list_albums',
    success: function(data) {
        $('#thumbs, #images').html('');
        $('#glist').html(data).show();

        var $container  = $('#glist'),
            $imgs       = $container.find('img').hide(),
            totalImgs   = $imgs.length,
            cnt         = 0;


        $imgs.each(function(i) {
        var $img        = $(this);
        $('<img/>').load(function() {
            ++cnt;
            if( cnt === totalImgs ) {
                    $imgs.show();
                    $container.montage({
                            fillLastRow                             : true,
                            alternateHeight                 : true,
                            alternateHeightRange    : {
                                    min     : 70,
                                    max     : 140
                            }
                    });

                    /*
                     * just for this demo:
                     */
                    $('#overlay').fadeIn(500);
            }
        }).attr('src',$img.attr('src'));
        });     
    }
});
return false;

}）;

所以，我的问题是：如何重新加载此脚本或使其以某种方式与ajax一起使用。

Answer 1

插件示例页面上有“示例4”，可以准确显示您想要的内容。有一个“加载更多”按钮，将执行以下代码

$('#loadmore').show().bind('click', function() {
    var len = imgarr.length;
    for( var i = 0, newimgs = ''; i < 15; ++i ) {
        var pos = Math.floor( Math.random() * len ),
        src = imgarr[pos];
        newimgs += '<a href=""><img src="images/' + src + '.jpg"/></a>';
    }
    var $newimages = $( newimgs );
    $newimages.imagesLoaded( function(){
        $container.append( $newimages ).montage( 'add', $newimages );
    });
});

所以基本上它会创建一个包含新（锚定）图像的字符串，将此字符串包装到jQuery对象中，并在加载字符串内的图像时实现回调。加载后，你必须使用'add'参数和jQuery对象作为第二个参数调用.montage（）。

如何使这个脚本与ajax一起使用？

1 个答案: