Question

我正在Backbone.js中构建一个应用程序，并使用gridify以网格方式排列我的照片。问题是图像异步加载，这似乎导致网格化问题。所有ascyn调用完成后，有没有办法调用gridify函数？我尝试在后期渲染中放置调用，但这似乎没有帮助。这是我的代码：

在TemplateContext中：

        var images = [];
        this.model.get('images').each(function (imageModel) {
            var image = imageModel.toJSON()                
            images.push(image);
        }, this);
        return {               
            images: images,
            view:this
        }

在后期渲染中：

 var options =
      {
          srcNode: 'img',             // grid items (class, node)
          margin: '20px',             // margin in pixel, default: 0px
          width: '250px',             // grid item width in pixel, default: 220px
          max_width: '',              // dynamic gird item width if specified, (pixel)
          resizable: true,           // re-layout if window resize
          transition: 'all 0.5s ease' // support transition for CSS3, default: all 0.5s ease
                    }

$('.grid').gridify(options);

并在我的模板中：

<div id="activity" class = "grid" style="border: 1px solid black;">
    {{#if images }}
        {{#each images}}
                <img src ="?q=myApp/api/get_images&imgId={{id}}&imgSize=medium" >
        {{/each}}
    {{else}}
        No images have been uploaded
    {{/if}}
</div>

这会导致所有图像堆叠在一起。我认为这是因为gridify不知道尺寸应该是什么，因为在调用gridify之后图像被加载。如果我只是在模板中使用静态图像，它可以正常工作。任何人都有关于如何在骨干网或Gridify中处理这个问题的任何建议？

感谢杰森

Answer 1

来自文档：

http://mattlayton.co.uk/gridify/#examples

当图像是您的内容的一部分时，您将需要在加载所有图像后调用Gridify，以便可以考虑真实的图像尺寸。你的代码看起来应该是这样的这样：

$(window).load(function() {
  $('.grid').gridify();
});

如果图像是动态加载的：

https://stackoverflow.com/a/2311794/566092

https://stackoverflow.com/a/5424432/566092

https://www.google.co.in/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#safe=off&q=how+to+know+all+images+are+loaded

Answer 2

我最终做的是创建一个具有给定尺寸的div。然后我将图像放在div中并在div本身上使用gridify。这样，gidify会对div进行处理，图像可以在以后加载。

Answer 3

由于CSS3过渡导致的问题为所有人设置为0.5。我已从动画中删除了宽度和高度。

它已经修复了最新的源代码https://github.com/hongkhanh/gridify

在图像完成加载ascyncronously后使用Gridify

3 个答案: