同位素/砌体+ json饲料加载所有元素到左边
isotope/masonry + json feed loading all elements to the left
我有同位素设置从JSON提要中拉入数据,并在文档准备就绪,它有坐在左边的所有元素,垂直堆叠而不是在同位素/砌体布局。
如果我手动调整浏览器窗口的宽度,它会重新调整,一切都是应该的。
我遵循这个例子http://jsfiddle.net/E7ZRW/37/但结果是不一样的,我想知道为什么?
CSS#social_container {
width: 100%;
padding: 30px;
}
.social_block {
background-color: #ffffff;
color: #000;
width: 320px;
margin: 5px;
/*float: left; setting left float doesn't fix the issue*/
}
JS
$(document).ready(function () {
//
// initialize at ready ;
//
$('#container').isotope({
itemSelector: '.block'
});
var page = 1;
function loadPage(page) {
var url = 'http://example.com/getImages/' + page;
$.getJSON(url, function(data) {
var newElements = "";
var item_count = 0;
//$.each(data.data, function(key, val) { console.log('Data key: ', key, ', Value: ', val)});
$.each(data.data, function(index, obj) {
var item = obj.Message;
newElements +=
'<div class="block">' +
'<span class="post_image"><img class="lazy" src="' + item.postImageLarge + '" data-original="' + item.postImageLarge + '" /></span>' +
'</div>';
item_count = item_count + 1;
//console.log("items: "+item_count+" page:"+page)
if (item_count==20) {
page = page + 1;
loadPage(page);
}
});
console.log("container width: " + $('#container').width()); //1024px
var $newElems = $(newElements);
$('#container').append($newElems).imagesLoaded(function () {
$('#container').isotope('appended', $newElems);
$("img.lazy").lazyload({
effect : "fadeIn",
skip_invisible : false
});
});
});
}
// Initial run with page empty.
loadPage(page);
});
编辑:我想我通过在同位素初始化选项中设置这个来解决它:
masonry: {
columnWidth: 120
}
你们还能看到我应该以更好的方式编码吗?
使用
$('#container').isotope({
itemSelector: '.block',
masonry: {
columnWidth: 120
}
});
相关文章:
- CKEditor Widget-阻止编辑可编辑元素本身
- 如何设置html元素填充的动画
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 使用clickToggle并在单击另一个元素时关闭元素
- 单击时将焦点更改为元素
- 表追加而不附加最后一个元素
- 如何在jQuery中获取元素的形式
- 我可以获得相对于被点击元素的确切点击位置吗
- 在函数中添加数组元素的数值
- 如何在Javascript中添加忽略父元素左边距和填充的子元素
- 要插入二叉树的第一个元素,请将其放在左边还是右边
- 我想在单击图像时更改 ul 元素的“左边距”
- 在li'上循环;s,并在每个元素的左边进行填充
- 设置元素的左边距和宽度以匹配另一个元素的边距和大小
- 当第一个元素被选中时,工具提示不显示第一个元素的左边
- 当元素经过某个左边位置时显示警告
- 同位素/砌体+ json饲料加载所有元素到左边
- 改变各种元素的样式.左边和上面用脚本
- 当浏览器调整大小时刷新左边元素的位置