jQuery：如何根据浏览器屏幕大小制作“实时分页器”而不刷新“内容”？

Question

jQuery：如何根据浏览器屏幕大小制作

real-time pager

而不刷新

content

？

您可以在 http://www.nytimes.com/chrome/ 中查看示例

HTML 和 CSS 位于 http://jsfiddle.net/laukstein/qjGrV/

#content{
    display:block;
    width:100%;
    height:40%;
    min-height:205px;
    max-height:408px;
    overflow:hidden;
}
li{
    width:100px;
    height:100px;
    margin:1px;
    float:left;
    background:#ccc;
}
...
<ul id="content">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    ...
</ul>
<div id="pager"><!--here lets show 1,2,3,4 etc. depending on screen size--></div>

Answer 1

现在我明白了你的问题，让我给 2 美分。

nty chrome 页面是用表格构建的。他们名为“solo”的自定义 jquery 应用程序会检测窗口的大小，并根据窗口的大小刷新

<tr>

和

<td>

的数量。

例如，如果窗口宽度较小，则使用 jQuery 重新创建表格，以便仅显示 。如果窗口高度足够高以显示两行，则表格将重新格式化并填充额外的故事（我假设使用 aJax，尽管将内容放在页面上并根据需要显示和隐藏故事的成本很低）。