我已经设置了 Masonry ( http://masonry.desandro.com/ ) 以显示包含文本和图像的内容网格。
一些图像是来自 Dribbble 的镜头,这些图像是通过 jribbble jquery 插件 ( http://lab.tylergaw.com/jribbble/ )从 Dribbble API 获取的
我需要使用 imagesLoaded ( http://desandro.github.io/imagesloaded/ ) 来检测 Dribbble 图像何时加载,然后在所有图像加载后再次布局 Masonry 以避免由图像引起的重叠网格项改变大小在最初的砌体布局之后。
问题:加载 Jribbble 图像后,砌体不再自行布置,使砌体网格具有重叠图像。
我按顺序导入了 Jquery、imagesLoaded、Masonry 和 Jribbble。这是我在插件之后导入的 Jquery:
$(document).ready(function() {
/*------------------------------------*\
Jribbble
\*------------------------------------*/
$.jribbble.getShotsByPlayerId('88paulmurphy', function (playerShots) {
var dribbbles = [];
$.each(playerShots.shots, function (i, shot) {
dribbbles.push('<a href="' + shot.url + '"><img src="' + shot.image_url + '" alt="' + shot.title + '" class="img--center"></a><header><h2>' + shot.title + '</h2><ul class="widget__tag-list"><li><span class="tag tag--dribbble"> Dribbble Shot</span></li></ul></header><footer class="widget__footer"><a href="' + shot.url + '" class="btn">View on Dribbble</a></footer>');
});
$('.js-dribbble').each(function(index){
this.innerHTML = dribbbles[index];
});
}, {per_page: 6});
/*------------------------------------*\
Masonry
\*------------------------------------*/
var $container = $('.main').masonry();
// layout Masonry again after all images have loaded
$container.imagesLoaded( function() {
$container.masonry({
itemSelector: '.widget',
transitionDuration: '0.4s'
});
});
});
任何帮助都会很棒,谢谢!