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

Question

抱歉拖了这么久，非常感谢您平时的时间和指导。

我有一个 div 尺寸未知；事实上，它的宽度和高度是使用百分比设置的，因此以像素为单位的最终值取决于 window innerWidth 和 innerHeight 属性。

我需要在 div 中创建一个 ajax 分页。换句话说，我有两个 child div s（下图）。第二个用于分页链接。第一个负责保存项目（水平和垂直对齐）。它将（自动）为 unknown width 。因此，内部项目的数量取决于其最终宽度和高度，因为所有项目都有固定的已知宽度和高度（假设 80 像素宽度和 50 像素高度）。

我希望下图能最好地说明我的问题：

目标是找到一个好的方法来找到 X 和 Y 的值。

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

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

完成的

我打算做什么：

创建一个 javascript 函数 calculate_viewport() 作为在任何其他事情之前执行的第一件事 parsed/exectued。
创建一个 javascript 函数，根据 calculate_viewport() 返回的值计算 X 和 Y 值。

将 X 和 Y 用于请求特定页面的 ajax 调用。

<script type="text/javascript">

function calculate_viewport() {
    var width_and_height_object;
    // calcluate width and height using of current window.innerWidth  and window.innerHeight
    // put values in an object width_and_height_object
    return width_and_height_object; }

function calculate_XandY(width_and_height_object) {
    var XandY_object;
    // calcluate X and Y values by perfoming necessary division operations
    return XandY_object; }

var XandY = calculate_XandY(viewport()); </script>

<!DOCTYPE html> <html>
    <head>
    </head>
    <body>
        <div id="parent" style="height: 70%; width: 50%">
            <div id="items_container" style="height: calc(100% - 30px); width: 100%"></div>
            <div id="pagination" style="height: 30px; width: 100%">></div>
        </div>
    </body>
    <script src="jquery.js"></script>
    <script type="text/javascript">
            $('a.next a.previous').click(function(e){
                 e.preventDefault();         
                 $.ajax({
                    type: "GET",
                    url: url_to_page_of_items,
                    data: { number_of_items_per_page : X_times_Y },
                    cache: false, 
                    success: callback // append result to items container div 
                 });        
           return false;
        });
    </script> </html>

您如何看待这种方法？有没有其他更好的方法来实现这个目标？是否可以在 <html> 标签之前创建一个 <script> 标签只是为了提前计算 window 大小？

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

Answer 1

您永远无法独自获得正确的布局数学。我的建议是事先布置好所有项目（弹性盒子在这里是理想的！），计算数量，然后使用 ajax.

填写它们

Here's a quick demo我激动了。实际的 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() 的那一行。这将获取每个项目顶部边缘的位置，添加高度以找到它们的底部边缘，并检查它是否超过了项目容器的边界。

之后您可以使用计数从服务器查询必要的项目。我还建议在所有项目上使用 visbility: hidden;，这样用户就不会在准备好之前看到它们。

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

pagination depending on window size - approach to find number of items per page

javascript

css

ajax

jquery

adaptive-design