2

我想为我的网站创建一个基线网格，始终在页面底部显示基线。

我所做的是创建一个通过 css 设置样式的初始基线。

<figure id="lines">
    <div class='base-line bl1'></div>
</figure>

然后创建新的，直到我到达文档的底部。

<script type="text/javascript">
        $(document).ready(function() {
            var diff = Math.floor( $('body').height() / $('.base-line').height() );
            for ( var i = 1; i <= diff; i++ )
                $('#lines').append("<div class='base-line bl" + i + "'></div>");
        });
    </script>

但是，当我调整页面大小（例如降低高度）时，会留下基线。当我动态增加文档的高度时（例如，使用媒体查询更改一些值），基线不会到达页面底部。

是否可以纠正在调整大小时添加和删除基线的调整大小处理程序？我想如果我base-line在每次调整大小时删除所有 s 并为每个调整大小状态绘制所有这些，那将是相当低效的。

有什么想法吗？

4

2 回答 2

0

好吧，你可以，

$(window).resize(function(){
   var height = $(window).height();  /*or width*/
   var min = 500; //for example
   if(height < min){
      $('.base-line').hide();
   }else{
      $('.base-line').show();
   }
});

但我不确定你是想隐藏/显示还是删除/添加（我会先做）

于 2012-05-09T18:11:49.037 回答
0

假设这是创建基线的函数

function addBaseLines(){
    $('#lines').clear();
    var diff = Math.floor( $('body').height() / $('.base-line').height() );
    for ( var i = 1; i <= diff; i++ ){
       append("<div class='base-line bl" + i + "'></div>");
    }
}

你可以这样做

var timeout = null;

$(window).resize(function(){
    if (timeout!=null){
        clearTimeout(timeout);
    }
    timeout = setTimeout( addBaseLines, 1000); // only do when the user is "done" 

});

在JSFiddle中查看

如果您使用超时，性能并不可怕......

为了提高性能，只需删除那些看不见的，但我认为这不是那么重要

于 2012-05-09T18:47:42.717 回答