- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
这就是我想要做的。我有一个包含大量图像的网格,因此我将 imagesLoaded 库与 masonry 一起使用。
这是我的 CSS:
.grid {
opacity:0;
}
和 HTML:
<div class="grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<div class="item">image</div>
<div class="item">image</div>
<div class="item">image</div>
</div>
这是我的 JS:
var $container = $('.grid');
// initialize Masonry after all images have loaded
$container.imagesLoaded( function() {
$container.masonry({
columnWidth: '.grid-sizer',
itemSelector: '.item',
gutter: '.gutter-sizer'
});
$container.masonry('on', 'layoutComplete', function(){
console.log('got here');
$container.animate({'opacity':1});
});
});
我的目标是隐藏网格,直到加载所有图像且布局完成,然后淡入。出于某种原因,在我上面的代码中,它永远不会进入 on layoutComplete block 。
如果我将该 block 移到 imagesLoaded 之外,则 $container.masonry 在该点未定义。
有什么想法吗?
如果将网格不透明度更改为 1,您可以看到一切都布置得很好。只是想弄清楚如何让 layoutComplete 调用以将不透明度设置为 1。
最佳答案
您不需要在 masonry 上使用 layoutComplete
事件。因为您可以在 masonry 初始化下添加动画代码。
当所有图片加载完成后,imageLoaded 函数就会执行。然后,您可以像这样创建砖石对象并立即设置动画:
var $grid = $('.grid').imagesLoaded( function() {
// init Masonry after all images have loaded
$grid.masonry({
columnWidth: 200,
itemSelector: '.item',
gutter: 10
});
console.log('got here');
$('.grid').animate({'opacity':1});
});
这是一个jsfiddle证明
关于javascript - masonry 事件 : Call event after imagesLoaded and layoutComplete,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28371548/
我正在尝试通过端口将 Elm 应用程序与 Masonry.js 集成,但我在尝试弄清楚如何获取 Signal Html 来触发告诉 Masonry.js 重绘 View 的端口时遇到了麻烦。 我正在使
我的网站设计了媒体查询,以覆盖不同大小的布局。我有砌体组织一堆全尺寸宽度的浮标,没问题。在移动宽度下,所有浮子都会浮起并堆叠在一起。所以我只需要在网站大小调整为平板电脑布局且 768px // */
我遇到了典型的砖石溢出问题。我正在尝试加载推特卡片,但在加载时,它们仍然相互重叠。一旦调整屏幕大小,它们就会工作。仅供引用,我肯定有 imageLoad 和 masonry 。我在 Rails 中这样
如何证明 masonry 网格元素居中? 似乎 Masonry 将我所有的网格项都 float 到左侧或将内容对齐到左侧: 1 2 3 4 5
我想在下拉菜单中使用 jquery masonry,在复杂的下拉菜单中组织动态菜单项 block (图像和文本)。 我有几个问题。 首先,如果我从 display:none 开始,那么 masonry
我在使用passy masonry时遇到了这个错误。知道这是什么意思吗?因为现在基本上 masonry 对我根本不起作用。 提前致谢 最佳答案 我不确定您的问题的原因是什么,但我只是在处理同样的事情,
我是编程新手(javascript),但为了使我的 tumblr 主题正常工作,过去几天我做了很多研究。我知道我的问题很常见,但似乎我没有足够的知识来正确集成许多类似示例中给出的代码部分。 My th
我正在使用 masonry和 typekit .因此,我希望布局为 not have overlapping由于图像加载,同时 render the typekit fonts without hav
我在一个项目中成功地使用了 Passy 的 angular-masonry。 https://github.com/passy/angular-masonry 访问 Masonry 对象的事件函数的最
我在将砌体与 Foundation 网格布局集成时遇到问题。本质上,对于不同高度的相同宽度的图像,砌体按预期工作,但在某些断点处,网格只有两列布局,而不是通常的四列布局。 但是,如果您继续最小化浏览器
我正在使用 Handlebars http://handlebarsjs.com/和砖石https://masonry.desandro.com/获取一些 JSON 数据并使用 Jquery prep
我正在尝试在以下页面上获取每个内容: http://snowbird.camorada.com/test.php 以砖石格式查看,如下所示: http://masonry.desandro.com/d
我对最新版本的砌体有一个奇怪的问题。之前让它工作,但对于一个新项目,我下载了最新版本的 jQuery 和 Masonry,一切正常。由于插件中的错误,IE7 不会加载 Masonry 库。 我在 IE
如何每次执行我的函数 Masonry脚本重新组织元素,例如当窗口调整大小时? 在这个例子中,它只在第一次工作。 $(document).ready(function() { $('#conta
我一直在尝试 Masonry,但无法完全按照我的意愿工作。我使用的元素的宽度和高度各不相同,但都适合一个网格(4 种不同的尺寸,所有最小+边距的倍数)。我还计算了可以精确拟合的元素分布(最小的 7 个
我正在创建一个带阴影的砖石布局。但不幸的是,阴影被剪裁为以下片段。我知道放一些底部填充可以解决这个问题,但是这张卡片的内容可以不时改变,然后高度会根据内容改变。所以这里的问题需要一个纯 CSS 方法来
我在 WordPress 中使用砌体布局,因此我本地站点的砌体布局与循环放在一起。我创建了一个 fiddle 来解释我的问题。 如何控制一个项目在砌体布局中的位置? 我希望 div 始终位于砖石容器的
我让它工作,但由于某种原因它停止工作,我不知道我做了什么。盒子 div 向左浮动,我只是不知道我在哪里'出了问题。 Jquery var $container = $('.work');
我怎样才能让砖石更多地尊重这里的原始元素顺序?我希望顺序是海豚、鱼、无脊椎动物、鳍足类: var $container = jQuery('.tax-product_cat #content'); $
在目录站点上使用 Masonry。默认情况下,显示的项目按日期排序,然后按部件号排序。我的图像高度不同。问题是,如果我错了,请纠正我,Masonry 将第 2 行第 1 项设置在第 1 行中最短的项下
我是一名优秀的程序员,十分优秀!