Question

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

我有一个未知的维度;事实上，它的宽度和高度是使用百分比设置的，因此最终的像素值取决于窗口innerWidth和innerHeight属性。

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

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

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

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

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

我打算做什么：

创建一个javascript函数calculate_viewport()，以便在解析/执行任何其他内容之前执行第一件事。
创建一个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>

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

N.B：对于服务器端部分，我设法通过我正在使用的ORM库提供的某些功能对结果进行分页。我使用服务器端模板引擎将一个项目页面呈现为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;，以便用户在准备好之前不会看到它们。

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

1 个答案: