[英]dynamic DOM masonry jQuery plugin
I am creating dom
elements by parsing tumblr
's json file. 我通过解析
tumblr
的json文件来创建dom
元素。
After the images are loaded, i would like to apply a jQuery plugin Masonry to tighten up the image grid. 加载图像后,我想应用jQuery插件Masonry来收紧图像网格。
Heres my attempt but it doesnt seem to be responding 这是我的尝试,但似乎没有反应
Any help would be greatly appreciated, thank you. 任何帮助将不胜感激,谢谢。
var container = $('#output');
$.getJSON("http://mydomain.tumblr.com/api/read/json?callback=?", function(data) {
$.each(data["posts"], function(i){
var img = data["posts"][i]["photo-url-400"];
container.append('<div class="box"><a href="temp.php?var='+i+'"><img src="'+img+'" alt="" /></a></div>');
});
});
//container.live('imagesLoaded', function(){
container.imagesLoaded( function(){
container.masonry({
itemSelector: '.box',
columnWidth : 400
});
});
or this 或这个
var container = $('#output');
$.getJSON("http://mydomain.tumblr.com/api/read/json?callback=?", function(data) {
$.each(data["posts"], function(i){
var img = data["posts"][i]["photo-url-400"];
container.append('<div class="box"><a href="temp.php?var='+i+'"><img src="'+img+'" alt="" /></a></div>', function(){
container.imagesLoaded( function(){
container.masonry({
itemSelector: '.box',
columnWidth : 400
});
});
});
});
// Nothing changed here:
var container = $('#output');
$.getJSON("http://mydomain.tumblr.com/api/read/json?callback=?", function(data) {
$.each(data["posts"], function(i){
var img = data["posts"][i]["photo-url-400"];
container.append('<div class="box"><a href="temp.php?var='+i+'"><img src="'+img+'" alt="" /></a></div>');
});
});
// Now, do this:
container.masonry({
itemSelector: '.box',
columnWidth : 400
});
var masonryUpdate = function() {
setTimeout(function() {
container.masonry();
}, 500);
}
$(document).on('click', masonryUpdate);
$(document).ajaxComplete(masonryUpdate);
Never worry about it again! 再也不用担心!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.