我正在尝试在响应式设计中使用 jQuery Masonry,但它无法正常工作。
有时,未显示所需的列数。
示例:
Windows-Size: 1024 px
实际上这里应该出现 3 列,但只显示了 2 列。从 1038px 3 列可见..
我不明白我做错了什么..有什么帮助吗?
网站: http: //www.len-lenlikes.com/#go_posts
masonry_responsive_css:
#site-content {
max-width: 82em;
margin-top: 2.2%;
min-height: 700px;
}
#list {
width: 100%;
margin-left: 0;
overflow: hidden;
margin-bottom: -1.875em;
}
.item {
width: 100%;
margin-bottom: 2.2%;
float: left;
}
.item img {
padding-left: 2%;
padding-right: 2%;
width: 100%;
height: auto;
}
@media (min-width: 47em) {
#site-content {
margin: 1.1% auto;
}
}
@media (min-width: 64em) {
#site-content {
background-color: red;
}
}
@media (min-width: 90em) {
#site-content {
margin-top: 4.4%;
}
}
@media (min-width: 100em) {
#site-content {
max-width: 114em;
margin-top: 2.8%;
}
}
@media (min-width: 47em) {
.item {
width: 50%;
margin-top: 0.6%;
}
}
@media (min-width: 64em) {
.item {
width: 33.2%;
margin-top: -1%;
}
}
@media (min-width: 100em) {
.item {
width: 25%;
}
}
@media (min-width: 47em) {
.item img {
padding-left: 9px;
padding-right: 9px;
}
}
masonry_responsive_js:
// update columnWidth on window resize
var columns = 1,
setColumns = function () {
if (jQuery(window).width() < 767) {
columns = 1
} else if (jQuery(window).width() < 1023) {
columns = 2
} else if (jQuery(window).width() < 1760) {
columns = 3
} else {
columns = 4
}
}
setColumns();
jQuery(window).resize(setColumns);
//container for the posts (images)
var $container = jQuery('#list');
//Detect when images have been loaded.
$container.imagesLoaded(function () {
//Initialize Masonry
$container.masonry({
isAnimated: true,
animationOptions: {
duration: 500,
easing: 'linear',
queue: false
},
//Animating with CSS Transitions
isAnimated: !Modernizr.csstransitions,
itemSelector: '.item',
resizable: false, // disable normal resizing
columnWidth: function (containerWidth) {
return containerWidth / columns;
}
});
});
$container.infinitescroll({
navSelector: '#nav-posts', // selector for the paged navigation
nextSelector: '#nav-posts .prev a', // selector for the NEXT link (to page 2)
itemSelector: '.item', // selector for all items you'll retrieve
loading: {
msgText: 'Loading...',
finishedMsg: 'No more pages to load.',
img: ''
}
},
// trigger Masonry as a callback
function (newElements) {
// hide new items while they are loading
var $newElems = jQuery(newElements).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function () {
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry('appended', $newElems, true);
});
}