jQuery Masonry 和媒体查询 - 重新加载 masonry
我的网站设计有媒体查询，以覆盖不同大小的布局。我有砌体组织一堆全尺寸宽度的浮标，没问题。在移动宽度下，所有浮子都会浮起并堆叠在一起。因此，当网站大小调整为平板电脑布局且 768px <= 宽度 <= 1000px 时，我只需要重新运行 masonry。
<script type="text/javascript">
//<![CDATA[
$(document).ready(function($){
$('ul.xoxo').masonry({ singleMode: true, itemSelector: '.widgetcontainer' });
//If the User resizes the window, adjust the #container height
$(window).bind("resize", resizeWindow);
function resizeWindow( e ) {
var newWindowWidth = $(window).width();
if(newWindowWidth<1008){
$('ul.xoxo').masonry();
} else {
$('ul.xoxo').masonry();
}
}
});
/* ]]> */
</script>
这对我来说还不起作用，但我也不希望它在所有调整大小上运行......只是在断点处。
i have my site designed with media queries to cover different-sized layouts. i have masonry organizing a bunch of floats at the full-size width, no problem. at the mobile widths, all the floats, unfloat and just stack on top of each other. so i only need to re-run masonry when the site resizes to the tablet layout when 768px <= width <= 1000px.
<script type="text/javascript">
//<![CDATA[
$(document).ready(function($){
$('ul.xoxo').masonry({ singleMode: true, itemSelector: '.widgetcontainer' });
//If the User resizes the window, adjust the #container height
$(window).bind("resize", resizeWindow);
function resizeWindow( e ) {
var newWindowWidth = $(window).width();
if(newWindowWidth<1008){
$('ul.xoxo').masonry();
} else {
$('ul.xoxo').masonry();
}
}
});
/* ]]> */
</script>
which doesn't work for me yet, but also i don't want it running on all resizes... just at the break points.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
对于这些情况，您可以使用 Masonary 的 isRessized 选项。
You can use Masonary's isResizable option for these cases.
对于我想要做的事情，一个更好的解决方案称为同位素，它在调整大小时效果更好
http://isotope.metafizzy.co /
a better solution for what i was trying to do is called Isotope, which works better on resize
http://isotope.metafizzy.co/