imagesLoaded jQuery的功能不与砌体工作 [英] imagesLoaded jquery function not working with masonry

问题描述

我一直在为此工作一段时间。

我试图在加载所有我的文章内容并应用相关砌体布局后使用淡入淡出功能。已经在几个地方对此进行了研究，尝试了不同版本的，但似乎无法使其工作。

这是我的基本html结构：

 < div id = 职位 > 
 
< article class =发布文字clearfix> 
 //文字信息等
< / article> 
 
< / div> 
  

我调用了masonry，然后调用了图像加载的jquery插件。

我的js看起来像这样（我意识到我需要在css中设置display：none。）

 < script type =text / javascript> 
 $（document）.ready（function（）{
 var $ eachContainer = $（'。post'）; 
 $ eachContainer.hide（）; 
 var $ wall = $（'＃posts'）; 
 $ wall.imagesLoaded（function（）{
 $ eachContainer.fadeIn（）; 
 $ wall.masonry（{
 columnwidth：84， 
 itemSelector：'.post'
}）; 
}）; 
}）; 
< / script> 
  

我也试着在window.load函数中运行上面的代码。看起来好像用这个函数砌体columnWidth没有被计算。

实际上，我正在测试这个代码的地方有两个tumblrs。

1. http：// kidsofdada。 tumblr.com/ （这是行得通的，但我希望图像在设置砌体网格之后淡入。
tumblr.com/rel =nofollow> http://childofdada.tumblr.com/ 图片淡入，但砌体边框设置不正确，拖动浏览器时也无法调整大小。 b $ b

编辑1：

我试着用上面提供的例子重新编码上面的函数现在我的代码如下所示：

  var container = document.querySelector（'＃posts'）; 
 var msnry = new Masonry（容器，{
 columnWidth：84，
 itemSelector：'.post'，
 isInitLayout：false 
}）; 
 
 msnry.on（'layoutComplete'，function（）{
 console.log（'layout is complete'）; 
 $（'。post'）。fadeIn（）; 
} ）; 
  

加载页面时，所有帖子都隐藏起来。如何将函数仅绑定到window.load或document.ready函数？
如果您调整浏览器大小，则会触发并显示帖子： http://childofdada.tumblr.com/

编辑2：

尝试实现虚假标记代码，我意识到我可能拥有这写错误（尝试切换它）。

  var firstTime ='false'; 
 
 var container = document.querySelector（'＃posts'）; 
 var msnry = new Masonry（容器，{
 columnWidth：84，
 itemSelector：'.post'，
 isInitLayout：false 
}）; 
 $ b $ if（firstTime =='false'）{
 msnry.on（'layoutComplete'，function（）{
 console.log（'layout is complete'）; 
 $（'。post'）。fadeIn（）; 
 firstTime ='true'; 
}）; 
 
  

解决方案

我希望这是你想要： http://jsfiddle.net/nVYcP/

我必须做的是隐藏 visibility：hidden ，而不是 hide（）（其中设置 display：none ）。这个技巧让jQuery / masonry来计算正确的位置。

在 .masonry 之后，通过第一次隐藏用jQuery接受的方法，删除可见性标记，并用 fadeIn 显示。这里的时间必须有点大（我把2秒），否则动画是永远不可见的，因为大量的itens淡入淡出。

显示帖子的代码也可以放在 imagesLoaded 回调中，但我认为这样可以正常工作。

最终代码：

  $（'＃posts'）。masonry（{columnWidth：84}）; 
 
 $（＃site）
 .hide（）
 .css（visibility，）
 .fadeIn（2000）; 
  

I've been working on this for some time.

I am trying to use a fadein function after all of my post content has been loaded and had the relevant masonry layout applied. Have researched this in several places, tried different versions of the imagesLoaded plugin but cannot seem to get it working.

This is my basic html structure:

<div id="posts">

    <article class="post text clearfix">
    // text post etc
    </article>

</div>

I am calling masonry and then the imagesLoaded jquery plugin.

My js looks like this (I realise I need to set display:none in the css at some point).

<script type="text/javascript">
$(document).ready(function() {
    var $eachContainer = $('.post');
    $eachContainer.hide();
    var $wall = $('#posts');
    $wall.imagesLoaded( function() {    
        $eachContainer.fadeIn();
        $wall.masonry({
            columnwidth: 84,
            itemSelector : '.post'
        });
    });
});
</script>

I've tried running the above in a window.load function too. It seems as though with this function the masonry columnWidth is not being calculated.

I actually have two tumblrs where this code is being tested.

1. http://kidsofdada.tumblr.com/ (this is working but I want the images to fade in AFTER the masonry grid has been set.
2. http://childofdada.tumblr.com/ images fading in, but masonry border not setting properly, also not resizing when the browser is dragged.

EDIT 1:

I have tried to recode the above function using the example provided at the plugin site. So now my code looks like this:

 var container = document.querySelector('#posts');
 var msnry = new Masonry( container, {
    columnWidth: 84,
    itemSelector: '.post',
    isInitLayout: false
});

msnry.on( 'layoutComplete', function() {
    console.log('layout is complete');
    $('.post').fadeIn();
});

When the page is loaded all posts are hidden. How do I bind the function only to the window.load, or document.ready functions? If you resize the browser, this triggers and will display the posts: http://childofdada.tumblr.com/

EDIT 2:

Trying to implement the false flag code, I realise I may have this written incorrectly (have tried switching it).

var firstTime = 'false';

var container = document.querySelector('#posts');
var msnry = new Masonry( container, {
    columnWidth: 84,
    itemSelector: '.post',
    isInitLayout: false
});

if (firstTime == 'false') {
    msnry.on( 'layoutComplete', function() {
        console.log('layout is complete');
        $('.post').fadeIn();
        firstTime = 'true';
    });
}

解决方案

I hope this is what you want: http://jsfiddle.net/nVYcP/

What i had to do is hide the body with visibility: hidden, and not hide() (which set display: none). This tricks jQuery/masonry to calculate the correct places.

After the .masonry you display it back by first hiding with the jQuery accepted method, removing the visibility tag, and showing with fadeIn. The time here have to be a bit big (i put 2 seconds) or else the animation is never visible due to the lag to fade in the large amount of itens.

The code to show the posts can be put in the imagesLoaded callback as well, but I think it's working fine this way.

Final code:

$('#posts').masonry({columnWidth: 84});

$("#site")
    .hide()
    .css("visibility", "")
    .fadeIn(2000);

这篇关于imagesLoaded jQuery的功能不与砌体工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！