我正在通过从 Free Code Camp 的露营者新闻 API 获取链接来创建一个页面,当我尝试对齐新闻链接的布局时,我无法让 masonry.js
工作具有不同的图像尺寸。这是我的代码:
$(document).ready(function() {
$.getJSON("http://www.freecodecamp.com/news/hot", function(json) {
var html = ""
json.forEach(function(val) {
html += "<div class='grid-item'>";
html += "<a href='" + val.link + "' target='_blank'>";
if (val.image === "" || val.image === "undefined") {
html += "<img src='" + val.author.picture + "'>";
} else {
html += "<img src='" + val.image + "'>";
}
html += "</a>"
html += "<p><a href='" + val.link + "' target='_blank'>" + val.headline + "</a></p>"
html += "<p>" + val.rank + " points</p>";
html += "</div>"
});
$("#camper-news").html(html);
$(".grid-item:first").removeClass().addClass("grid-sizer")
});
$('#camper-news').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true,
gutter: 5
});
});
我已经设置了一个 demo在 codepen 中也包含 html 和 css
我已尝试按照提供的文档使用 jQuery
初始化 masonry.js
,但由于某种原因无法正常工作。我已经尝试通过设置一个断点来调试,在我的代码中初始化 masonry 并单击“跳过下一个函数调用”。虽然我对使用 Chrome 调试工具还很陌生,但我确实看到它通过了 masonry.pkgd.min.js 文件,所以我认为我已经正确初始化了 masonry。我也在 StackOverflow 上查看了与 masonry.js
相关的其他问题,但我还没有找到解决方案。我想知道是否是因为我用 jQuery
加载了 div
。
最佳答案
初始化位置错误:
$(document).ready(function() {
$.getJSON("http://www.freecodecamp.com/news/hot", function(json) {
var html = ""
json.forEach(function(val) {
html += "<div class='grid-item'>";
html += "<a href='" + val.link + "' target='_blank'>";
if (val.image === "" || val.image === "undefined") {
html += "<img src='" + val.author.picture + "'>";
} else {
html += "<img src='" + val.image + "'>";
}
html += "</a>"
html += "<p><a href='" + val.link + "' target='_blank'>" + val.headline + "</a></p>"
html += "<p>" + val.rank + " points</p>";
html += "</div>"
});
$("#camper-news").html(html);
$(".grid-item:first").removeClass().addClass("grid-sizer")
$('#camper-news').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true,
gutter: 5
});
});
});
http://codepen.io/anon/pen/LGBQJK
然后你必须使用图像加载插件 确保所有图像都已加载:
Masonry images overlapping above each other
这是最终的解决方案: http://codepen.io/anon/pen/jWpZXa
关于javascript - 从 jQuery 创建动态 div 时 Masonry.js 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35154021/