1

我正在尝试使用 jQuery 将这些元素平均分开。如您所见，我将对象的宽度相加并减去周围 DIV 的宽度以找到空白空间。然后我将那个空白空间和每个元素隔开那个数量（通过右边距）。这是 JSFiddle：http: //jsfiddle.net/spaceninja/baQNA/

我的问题是（注意：我将其用作学习机会，因为我知道还有其他方法可以做到这一点）为什么我必须在下一行中减去 4 才能使它起作用？我认为执行 Math.floor 可以将其四舍五入，但仍有大约 4 个像素将其分解为下一行。如果您从以下行中取出 -4，它会中断，我不知道为什么。

var spacer = (Math.floor(remaining / 4) -4 );

这是HTML：

<div>
    <span>Short</span>
    <span>A Very Very Long One Is Right Here</span>
    <span>Short</span>
    <span>Short</span>
    <span>Short</span>        
</div>

这是jQuery：

var measurements = 0;
for (var i=0; i<=4; i++) {
    measurements += $('span').eq(i).width();
}
var totalWidth = $('div').width();
var remaining = 0;
remaining = totalWidth - measurements;
var spacer = (Math.floor(remaining / 4) -4 );
for (var i=0; i<=3; i++) {
    $('span').eq(i).css('margin-right', spacer);
}
4

2 回答 2

2

这是您的跨度之间的空格字符的原因

<div><span>Short</span><span>A Very Very Long One Is Right Here</span><span>Short</span><span>Short</span><span>Short</span></div>

http://jsfiddle.net/r043v/baQNA/7/

于 2013-06-20T22:17:05.367 回答
1

看看我的例子或第二个。也许会启发你。我的代码中有很多混乱；）

sandbox.zije.sk/js/index.php的内容：

<html>
    <head>
        <title>JS</title>
        <script type="text/javascript" src="./jquery.js"></script>
        <style>
            body{ padding:0; margin:0; }
            div.rect{ float:left; }
            div.wrapper{ width:900px; height:400px; background: red; }
        </style>
    </head>
    <body>
        <?php foreach(range(1,12) as $v) echo '<div class="rect" style="background:#'.rc().'"></div>'; ?>
    </body>
</html>

<script type="text/javascript">
function mod(a, n) {
    return a - (n * Math.floor(a/n));
}
function adjust(c){
    var h = window.innerHeight;
    var w = window.innerWidth;
    var ss = w>h?h:w;
    var ls = w>h?w:h;
    var cnt = $(c).length;

    var i = 1;
    var step = 0.01;
    var box_strana;
    var box_obsah;
    var wrapper_obsah;
    var wrapper_obsah_ef;
    var limit = 5000;
    var index = 0;
    while(true){
        if(index++>limit) break;
        box_strana = ss/i;
        box_obsah = box_strana*box_strana;
        wrapper_obsah = h*w;
        wrapper_obsah_ef = (h-mod(h,box_strana))*(w-mod(w,box_strana));
        if((cnt*box_obsah)<=wrapper_obsah_ef) break;
        i = parseFloat(parseFloat(i) + parseFloat(step));
    }
    console.log(h);
    console.log(box_strana);
    console.log(parseInt(box_strana));
    console.log(mod(h,parseInt(box_strana)));
    console.log(mod(h,parseInt(box_strana)));
    console.log(parseInt(mod(h,parseInt(box_strana))/parseInt(h/parseInt(box_strana))));
    $(c).width(parseInt(box_strana)).height(parseInt(box_strana))
        .css('paddingRight',parseInt(mod(w,parseInt(box_strana))/parseInt(w/parseInt(box_strana))))
        .css('paddingBottom',parseInt(mod(h,parseInt(box_strana))/parseInt(h/parseInt(box_strana))));
};
$(document).ready(function(){
    adjust('.rect');
});
</script>

<?php
function rc(){
    mt_srand((double)microtime()*1000000);
    $c = '';
    while(strlen($c)<6){
        $c .= sprintf("%02X", mt_rand(0, 255));
    }
    return $c;
}

?>

sandbox.zije.sk/js/more.php的内容：

<html>
    <head>
        <title>JS</title>
        <script type="text/javascript" src="./jquery.js"></script>
        <style>
            body{ padding:0; margin:0; }
            div.rect{ float:left; }
            div.wrapper{ width:900px; height:400px; background: red; }
        </style>
    </head>
    <body>
        <?php foreach(range(1,600) as $v) echo '<div class="rect" style="background:#'.rc().'"></div>'; ?>
    </body>
</html>

<script type="text/javascript">
function mod(a, n) {
    return a - (n * Math.floor(a/n));
}
function adjust(c){
    var h = window.innerHeight;
    var w = window.innerWidth;
    var ss = w>h?h:w;
    var ls = w>h?w:h;
    var cnt = $(c).length;

    var i = 1;
    var step = 0.01;
    var box_strana=1;
    var box_obsah;
    var wrapper_obsah;
    var wrapper_obsah_ef;
    var limit = 5000;
    var index = 0;
    while(true){
        if(index++>limit) break;
        box_obsah = box_strana*box_strana;
        wrapper_obsah = h*w;
//        wrapper_obsah_ef = (h-mod(h,box_strana))*(w-mod(w,box_strana));
        wrapper_obsah_ef = parseInt((h-mod(h,box_strana))*(w-mod(w,box_strana)));
        if(parseInt(cnt*box_obsah)>wrapper_obsah_ef){ box_strana--; break; }
//        console.log()
        box_strana++;
    }
    $(c).width(parseInt(box_strana)).height(parseInt(box_strana))
        .css('paddingRight',parseInt(mod(w,parseInt(box_strana))/parseInt(w/parseInt(box_strana))))
        .css('paddingBottom',parseInt(mod(h,parseInt(box_strana))/parseInt(h/parseInt(box_strana))));
};
$(document).ready(function(){
    adjust('.rect');
    //$(window).on('resize', function(){ adjust('.rect') });
});
</script>



<?php
function rc(){
    mt_srand((double)microtime()*1000000);
    $c = '';
    while(strlen($c)<6){
        $c .= sprintf("%02X", mt_rand(0, 255));
    }
    return $c;
}

?>
于 2013-06-20T22:08:38.267 回答