响应时更改页面大小

Question

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

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) {&nbsp; &nbsp; callPagination(12);} else if (width >= 576 && width < 768) {&nbsp; &nbsp; callPagination(10);} else if (width >= 768 && width < 992) {&nbsp; &nbsp; callPagination(9);} else if (width >= 992) {&nbsp; &nbsp; callPagination(8);}};并且您必须创建函数：var callPagination = function(pageSize) {pageSize = pageSize;pagesCount = $('.content').length;var totalPages = Math.ceil(pagesCount / pageSize);$('.pagination').twbsPagination({&nbsp; &nbsp; totalPages: totalPages,&nbsp; &nbsp; visiblePages: 3,&nbsp; &nbsp; onPageClick: function(event, page) {&nbsp; &nbsp; &nbsp; &nbsp; var startIndex = pageSize * (page - 1);&nbsp; &nbsp; &nbsp; &nbsp; var endIndex = startIndex + pageSize;&nbsp; &nbsp; &nbsp; &nbsp; $('.content')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .hide()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .filter(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var idx = $(this).index();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return idx >= startIndex && idx < endIndex;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .show();&nbsp; &nbsp; }});};并在页面准备好时调用函数$(document).ready(function() {var width = window.innerWidth;detect(width)$(window).resize(function() {&nbsp; &nbsp; var width = window.innerWidth;&nbsp; &nbsp; detect(width)});});