响应时更改页面大小答案

【问题标题】：Change Page Size When at Responsive响应时更改页面大小
【发布时间】：2020-07-02 02:06:06
【问题描述】：

我正在使用引导程序......我的问题是如何更改我在脚本中声明的页面大小。避免分页时出现异常空间。 HERE AN IMAGE

当 Col-xl-3 时，我的页面大小为 12
当 Col-lg-4 时，我的页面大小将是 9
当 Col-md-6 时，我的页面大小将是 8

（更改响应时显示多少页面内容）

pageSize = 8;
pagesCount = $(".content").length;
var totalPages = Math.ceil(pagesCount / pageSize);

$('.pagination').twbsPagination({
  totalPages: totalPages,
  visiblePages: 3,
  onPageClick: function(event, page) {
    var startIndex = (pageSize * (page - 1));
    var endIndex = startIndex + pageSize;
    $('.content').hide().filter(function() {
      var idx = $(this).index();
      return idx >= startIndex && idx < endIndex;
    }).show();
  }
});

<div class="row">
  <div class="content col-6 col-md-6 col-lg-4 col-xl-3 mt-4">
    <div class="content-head">
      <img src="image.png">
    </div>
    <div class="content-title">
      <h3 class="text-center">CARD TITLE</h3>
    </div>
  </div>
</div>

这里是脚本和 Html 特定的代码块。

【问题讨论】：

标签： javascript html css bootstrap-4

【解决方案1】：

首先你必须检测你的窗口大小：

var detect = function(width) {
if (width < 576) {
    callPagination(12);
} else if (width >= 576 && width < 768) {
    callPagination(10);
} else if (width >= 768 && width < 992) {
    callPagination(9);
} else if (width >= 992) {
    callPagination(8);
}};

你必须创建函数：

var callPagination = function(pageSize) {
pageSize = pageSize;
pagesCount = $('.content').length;
var totalPages = Math.ceil(pagesCount / pageSize);

$('.pagination').twbsPagination({
    totalPages: totalPages,
    visiblePages: 3,
    onPageClick: function(event, page) {
        var startIndex = pageSize * (page - 1);
        var endIndex = startIndex + pageSize;
        $('.content')
            .hide()
            .filter(function() {
                var idx = $(this).index();
                return idx >= startIndex && idx < endIndex;
            })
            .show();
    }
});};

当页面准备好时调用函数

$(document).ready(function() {
var width = window.innerWidth;
detect(width)

$(window).resize(function() {
    var width = window.innerWidth;
    detect(width)
});});

【讨论】：