Fatal编程技术网
  • javascript/
  • Javascript jQuery中灵活的/响应的浏览器行为

Javascript jQuery中灵活的/响应的浏览器行为

javascript jquery css responsive-design

Javascript jQuery中灵活的/响应的浏览器行为,javascript,jquery,css,responsive-design,fluid-layout,Javascript,Jquery,Css,Responsive Design,Fluid Layout,狩猎：工作 Firefox：初始页面加载时出现奇怪的浮动问题，在浏览器调整大小后工作 Chrome：当窗口变小时，端盒快速跳跃 没有测试过其他浏览器 视频显示浏览器问题： 完整脚本： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> </head> <style> .box { height: 250px; backgro

狩猎：工作

Firefox：初始页面加载时出现奇怪的浮动问题，在浏览器调整大小后工作

Chrome：当窗口变小时，端盒快速跳跃 没有测试过其他浏览器

视频显示浏览器问题：

完整脚本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
</head>
<style>
.box {
    height: 250px;
    background-color: #999;
    float: left;
    margin-right: 10px;
    margin-top: 10px;
}
#boxes {
    width: 100%;
    overflow: auto;
}
.end-box {
    margin-right: 0;
}
.top-box {
    margin-top: 0;
}
</style>
<body>
<div id='boxes'>
    <div class='box'>1</div>
    <div class='box'>2</div>
    <div class='box'>3</div>
    <div class='box'>4</div>
    <div class='box'>5</div>
    <div class='box'>6</div>
    <div class='box'>7</div>
    <div class='box'>8</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
columns = Math.floor($('#boxes').width()/225); //min box/column size (before spacing)
var spacing = ((columns - 1) * 10/$('#boxes').width())*100; //10px spacing between boxes
$('.box').width(100/columns-spacing/columns+'%');
$('.box:nth-child('+columns+'n+0)').addClass('end-box');//removes margins
$('.box:nth-child(-n'+columns+')').addClass('top-box');

$(window).resize(function() {
    columnsCheck = Math.floor($('#boxes').width()/225);
    if(columns != columnsCheck) {
        $('.end-box').removeClass('end-box');
        $('.top-box').removeClass('top-box');
        $('.box:nth-child('+columnsCheck+'n+0)').addClass('end-box');
    }
    columns = columnsCheck;
    var spacing = ((columns - 1) * 10/$('#boxes').width())*100;
    $('.box').width(100/columns-spacing/columns+'%');
    $('.box:nth-child('+columns+'n+0)').addClass('end-box');
    $('.box:nth-child(-n'+columns+')').addClass('top-box');
});
</script>
</body>
</html>
如何在保持10px利润率的同时解决此问题。我也乐于通过JavaScript/jQuery创建这种效果的替代方法，试图避免使用纯CSS3。

为什么要使用JavaScript来实现这种效果？这应该通过CSS和媒体查询来完成……跨浏览器支持就是为什么，这意味着要用作polyfill。您正在测试的所有浏览器都支持媒体查询。我很清楚这一点，但许多浏览器不支持calc或flex Box，尤其是移动浏览器。我正在使用我首先安装的浏览器开发解决方案。当我有一个可行的解决方案时，我会在旧的浏览器中测试它，直到那时我只想让它工作。另外，我认为值得注意的是，大小是基于父元素的，与屏幕/设备大小无关，这是我想要的。所以媒体查询实际上对这个都不起作用。