仅适用jQuery的瀑布'回流'的形象已加载后瀑布、加载、适用、形象

2023-09-10 17:35:09 作者:傻傻的青儿

我使用jQuery的瀑布为我的网格样式的显示。

i am using jQuery waterfall for my grid style display.

要停止常见的图像重叠的问题,我都裹瀑布方法在.load()函数,如:

To stop the common images overlapping issue i have wrapped the waterfall method in a .load() function such as:

$(window).load(function(){
  $('#buildcontainer').waterfall({ 
    colMinWidth: 260, 
    defaultContainerWidth: 1000,
    autoresize: true
  });
});

的图像重叠,因为瀑布函数被调用之前的图像已经满载有其高度不能被确定。包裹在负载功能prevents功能这一点。

The images overlap because the waterfall function is called before the images have fully loaded there for their height cannot be determined. Wrapping the function in the load function prevents this.

现在的问题是,我有一个按钮,通过AJAX加载多个数据库的结果,并将它们附加到容器。

The problem is, i have a button which loads more database results via ajax and appends them to the container.

当项被追加,图像重叠。 jQuery的瀑布配有回流功能,重新排序的所有项目的容器内。

When the items are appended, the images overlap. jQuery waterfall comes with a 'reflow' function which re sorts all of the items inside the container.

在我的AJAX的成功,我这样运行这个程序:

In my ajax success i run it like so:

success: function(html) {                   
  $("#buildcontainer").append(html).waterfall('reflow');
}

我在这里看到的问题是,图像被追加,然后瀑布函数被调用但图像尚未完全加载。

The issue i see here is that the images are being appended, and then the waterfall function is being called but the images are not yet fully loaded.

有没有办法我只能运行瀑布('回流')之后的项目,满载。在相同的风格为:

Is there a way i can only run the waterfall('reflow') after the items have fully loaded. In the same style as the:

    $(window).load(function(){
    });

我已经试过包装,其中的项目将被附加到这个功能就行,我也尝试过追加的项目,然后再进行复流.load函数内部,但这两种不附加任何项目。

I have tried wrapping the line where the items are appended into this function, i have also tried just appending the items and then applying the reflow inside a .load function but both of these dont append any items.

这是什么任何帮助/想法,尝试下?谢谢!

Any help / ideas on what to try next? Thanks!

注:图片不重叠在FF,但确实在Chrome和Safari

Note: The images dont overlap in FF, but do in chrome and safari.

谢谢!

推荐答案

有一个看 imagesLoaded 库/ jQuery插件: http://imagesloaded.desandro.com/

Have a look at the imagesLoaded library / jquery plugin: http://imagesloaded.desandro.com/