Javascript 分页取决于窗口大小-查找每页项目数的方法

对不起，时间太长了，非常感谢您平时的时间和指导

我有一个未知维度的div；事实上，它的宽度和高度是使用百分比设置的，因此以像素为单位的最终值取决于窗口

innerWidth

an

innerHeight

属性

我需要在该div内创建一个ajax分页。换句话说，我有两个子

div

s（下图）。第二个是分页链接。第一个负责保管物品（水平和垂直对齐）。它将（自动）具有未知的宽度。因此，内部项目的数量取决于其最终宽度和高度，因为所有项目都有一个固定的已知宽度和高度（假设宽度为80像素，高度为50像素）

我希望下图能以最好的方式说明我的问题：

目标是找到一种很好的方法来计算X和Y的值

• X=每行的项目数
• Y=每列的项目数

这两个值将有助于查找每页的项目数（用于服务器端分页）。分页链接将通过将总页数除以此值来创建。注意：一切都是用ajax完成的

我计划做什么：

• 创建一个javascript函数

  calculate_viewport（）

  ，作为在解析/执行任何其他内容之前首先执行的内容
• 创建一个javascript函数，该函数根据

  calculate\u viewport（）

  返回的值计算X和Y值
• 使用X和Y进行请求特定页面的ajax调用

  
  函数calculate_viewport（）{
  变量宽度和高度对象；
  //使用当前window.innerWidth和window.innerHeight计算宽度和高度
  //将值放入对象宽度和高度中
  返回宽度和高度对象；}
  函数calculate_XandY（宽度和高度对象）{
  var XandY_对象；
  //通过执行必要的除法运算计算X和Y值
  返回XandY_对象；}
  var XandY=calculate_XandY（viewport（））；
  >
  $（'a.next a.previous'）。单击（函数（e）{
  e、 预防默认值（）；
  $.ajax({
  键入：“获取”，
  url:url\u至\u页面\u共\u个项目，
  数据：{每页的项目数：X乘以Y}，
  cache:false，
  成功：回调//将结果追加到items容器div
  });        
  返回false；
  });
  

你认为这种方法怎么样？有没有其他更好的方法来实现这一目标？在标记之前创建一个

标记只是为了进行早期窗口大小计算，是否可以接受

---

N.B:对于服务器端部分，我通过使用的ORM库提供的一些函数对结果进行分页。我使用一个服务器端模板引擎，将一页项目呈现为HTML。我准备根据要求提供任何代码。谢谢

你一个人永远不会把布局数学弄对的。我的建议是将所有项目都摆在手边（这里最理想的是flex box！），获得数量，然后使用ajax填充它们

我猛地跳起来。实际的JS非常简单，使用jQuery

var MARGIN = 10; //This should match your CSS

var itemContainerHeight = $(".foo").height();
var count = 0;

$(".item").each(function () {
  if ($(this).position().top + $(this).height() + MARGIN > itemContainerHeight) {
    $(this).hide();
  } else {
    count++;
  }
});

$('.pagination').text("I can display "+count+" items!");

重要的一行是包含

.position（）

的那一行。这将获得每个项目顶部边缘的位置，添加高度以查找其底部边缘，并检查其是否超过项目容器的边界

---

在此之后，您可以使用计数从服务器查询必要的项目。我还建议使用

visibility:hidden以便用户在准备好之前不会看到它们。
感谢您抽出时间。如果我理解的很好，那么您建议使用您提供的js设置最大初始项目数，并将可见性设置为隐藏，然后使用下一页的计数来仅请求每个页面中必要数量的项目。正确的？关于flexbox的一个注意事项是，它在IE8和IE9中不受支持，只有部分支持10和11，这对我来说是一个障碍<代码>显示：表格

+

表格布局：已修复

具有更好的浏览器支持（用于信息）@whitelettersinblankpapers是的！这就是我的方法。不过，这个问题对我来说很有趣，因为如果用户调整了窗口的大小，布局会很快被破坏——在您的情况下，我通常会选择固定的项目布局。你可以在ie8和IE9中使用flebox，你只需要使用一个我将使用你的答案（在阅读了关于它的指南后，由于我对flexbox的着迷，我当然会使用polyfill）。关于调整大小，我暂时不在我的项目中考虑它，但当我将来达到这一步时，我会在这里发表评论来分享我的想法。非常感谢，祝你今天愉快

var MARGIN = 10; //This should match your CSS

var itemContainerHeight = $(".foo").height();
var count = 0;

$(".item").each(function () {
  if ($(this).position().top + $(this).height() + MARGIN > itemContainerHeight) {
    $(this).hide();
  } else {
    count++;
  }
});

$('.pagination').text("I can display "+count+" items!");