//html代碼 <div id="demo"> <div class="jy-page">...</div> </div> //下載前處理的函數 renderOverpageClum () { let demoHeight = $('#demo').height() let pageWidth = $('#demo').width() let pageHeight = pageWidth / 595.28 * 841.89 // 計算每頁的高度 let pageNum = Math.ceil((demoHeight - 100)/(pageHeight - 100)) $('.jy-page').attr('style', 'height:'+pageHeight+'px;width:' + pageNum * pageWidth + 'px;column-count: '+pageNum+''); var baseDom = $('.jy-page').eq(0) console.log((demoHeight - 100)/(pageHeight - 100)) console.log(pageNum) console.log('每頁寬度:'+ pageWidth) console.log('每頁高度:'+ pageHeight) if (pageNum > 1) { for (var i = 1; i < pageNum; i++) { $('#demo').append(baseDom.clone().css('left','-' + pageWidth * i + 'px')) } } $('.table-item-first').each(function () { if ($(this).text().length > 5) { let pipHeight = $(this).height() $(this).nextAll().height(pipHeight).css({'line-height':pipHeight + 'px'}) } else { let pipHeight = $(this).height() $(this).nextAll().height(pipHeight).css({'line-height':pipHeight + 'px'}) } }) console.log('文檔高度:'+ $('#demo').height()) } //css樣式 #demo { min-width: 920px; max-width: 1190px; margin: 0 auto; overflow: hidden; box-sizing: border-box; } .jy-page { box-sizing: border-box; column-gap:0px; column-fill: auto; padding: 50px 0; position: relative; }