5

对不起，很抱歉，非常感谢您平时的时间和指导。

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

我需要在该 div 中创建一个 ajax 分页。换句话说，我有两个孩子div（下图）。第二个是用于分页链接。第一个负责持有物品（水平和垂直对齐）。它将（自动）具有未知宽度。因此，里面的项目数量取决于它的最终宽度和高度，因为所有项目都有一个固定的已知宽度和高度（比如说 80 像素宽度和 50 像素高度）。

我希望下图能以最好的方式说明我的问题： 在此处输入图像描述

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

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

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

我打算做什么：

  • 创建一个 javascript 函数calculate_viewport()，使其在解析/执行任何其他内容之前首先执行。
  • 创建一个 javascript 函数，该函数根据返回的值计算 X 和 Y 值calculate_viewport()。

  • 将 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>

您如何看待这种方法？还有其他更好的方法来实现这个目标吗？<script>是否可以在标签之前创建标签<html>以进行早期窗口大小计算？

注意：对于服务器端部分，我设法通过我正在使用的 ORM 库提供的一些功能对结果进行分页。我使用一个服务器端模板引擎，它将项目页面呈现为 HTML。我准备根据要求提供这部分的任何代码。谢谢

4

1 回答 1

2

您永远无法靠自己的方式获得正确的布局数学。我的建议是事先布置好所有的项目（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(). 这将获取每个项目顶部边缘的位置，添加高度以找到它们的底部边缘，并检查它是否超出了项目容器的边界。

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

于 2016-02-22T23:09:38.387 回答