1

野生动物园：作品

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

Chrome：缩小窗口时结束框会快速跳动（尚未测试其他浏览器）

视频显示浏览器问题：http ://tinypic.com/r/2gxo8w3/6

完整脚本：

<!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）。

4

0 回答 0