2

我已经在我的图片库上实现了 jquery isotope。
在图库中，我有图像上传表单，在用户上传图像后，我返回 Json 对象，其中包含有关上传图像的数据。
基于该数据，我想将新图像添加到同位素容器。
我尝试了几种方法，但都失败了。
最后一个将图像添加到容器中，但新图像位于旧图像之下。
我一定错过了什么，但找不到什么。
在此处输入图像描述

$("#ajaxUploadForm").ajaxForm({
...
success: function (result) {
                var $container = $('#container');
                var $newItems = $('<div class="imgItem"><a class="fancybox-button" rel="fancybox-button" href="' + @Url.Content("~/") + result.messageOriginal+ '"> <img src="'+ result.message +'" /> </div></a>');

                $container.prepend($newItems).isotope('reloadItems').isotope({ sortBy: 'original-order' });
...

这就是我在用户打开页面时加载项目的方式

$(window).load(function () {
        var $container = $('#container');

        $container.isotope({
            itemSelector: '.imgItem',
            filter: '*',

            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
...

这是每个项目的模板：

<div class="imgItem">
                <a class="fancybox-button" rel="fancybox-button" 
           href="@Url.Content("~/" + @i.Media.PathOriginal)" 
           >
                    <img src="@Url.Content("~/" + @i.Media.PathMedium)" alt="" />
                </a>
            </div>
4

2 回答 2

1

我遇到了同样的问题。所以我用它的图像加载插件包装它如下

$('#container').imagesLoaded( function(){
        $('#container').isotope({
          // options
          sortBy : 'random',
          layoutMode: 'masonry',
          itemSelector : '.imgItem'
        });
    });

它奏效了。

于 2013-05-24T16:23:52.763 回答
0

尝试

var $newItems = $('<div class="imgItem" style="float:left;"><a class="fancybox-button"....
于 2012-09-15T12:51:29.147 回答