gpt4 book ai didi

jQuery Masonry 和媒体查询 - 响应式

转载 作者:行者123 更新时间:2023-11-28 12:13:41 27 4
gpt4 key购买 nike


我正在尝试在响应式设计中使用 jQuery Masonry,但它无法正常工作。
有时,不会显示所需的列数。

例子:
Windows 大小:1024 像素
其实这里应该出现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);
});
}

最佳答案

您引用的网站中似乎没有包含“masonry_responsive_js”。

但我注意到网站的 main.js 文件中设置的规则与您上面评论中粘贴的脚本略有不同...

        if (jQuery(window).width() < 767) {
columns = 1
} else if (jQuery(window).width() < 1008) {
columns = 2
} else if (jQuery(window).width() < 1600) {
columns = 3
} else {
columns = 4
}

请注意,它正在检查“1600”,而不是“1760”。和“1008”而不是“1023”。

关于jQuery Masonry 和媒体查询 - 响应式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19333027/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com