5

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

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

我需要在该 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 回答