在响应时更改页面大小

Question

我正在使用引导程序来解决我的use....My问题，就是如何更改我在脚本中声明的页面大小。在分页时避免不寻常的空间。在这里，一幅图像

1. 当Col-xl-3时，我的页面大小将为12。
2. 当Col lg-4的时候，我的页面大小将是9。
3. 当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特定的代码块。

Answer 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)
});});