响应时更改页面大小

Question

我正在使用引导程序......我的问题是如何更改我在脚本中声明的页面大小。避免分页时出现异常空间。 这是一张图片当 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 特定代码块。

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)

});});