建站
咨詢
售后
建站咨詢
新聞中心
假設(shè)我們有n 個(gè)項(xiàng)目，并且我們必須在網(wǎng)格布局中將這些項(xiàng)目按列排序。列數(shù)是固定的，我們還必須確保網(wǎng)格布局中的行數(shù)最少，以便有效填充網(wǎng)格。在本文中，我把數(shù)字視為項(xiàng)目。并且根據(jù)我們的要求在網(wǎng)格布局中排列1-13之間的數(shù)字。列數(shù)固定為三。我將使用 React和SCSS(Sassy CSS)對(duì)此進(jìn)行演示。
成都創(chuàng)新互聯(lián)成立于2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元沭陽做網(wǎng)站,已為上家服務(wù),為沭陽各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220
如果必須按行排列，那將是非常簡(jiǎn)單的。用CSS就可以了，代碼如下所示：
完整的代碼，包括CSS部分，如下所示：
輸出效果：
如你所見，數(shù)字按行排列。在這里，網(wǎng)格項(xiàng)目沿水平方向流動(dòng)，并根據(jù)需要自動(dòng)創(chuàng)建新行。當(dāng)網(wǎng)格項(xiàng)目流達(dá)到列尾時(shí)，將創(chuàng)建一個(gè)新行。這也稱為行優(yōu)先排列，因?yàn)橹挥性谇耙恍型耆顫M時(shí)才開始下一行。
但是我們的要求是按列安排項(xiàng)目，所以為了按列排列項(xiàng)目，我們需要知道網(wǎng)格布局中的行數(shù)。我可以解釋為什么要需要知道行數(shù)。在逐行排列中，僅當(dāng)前一行完全填滿時(shí)(即，前一行中的項(xiàng)目數(shù)已等于列數(shù))，才開始下一行。
類似地，在逐列排列中，只有當(dāng)前一列完全填滿時(shí)(即，前一列中的項(xiàng)目數(shù)已等于行數(shù))，新列才開始。因此，我們需要知道行數(shù)有多少。那么問題來了，我們?nèi)绾尾拍苤谰W(wǎng)格布局中要進(jìn)行的行數(shù)呢?可以通過基本的數(shù)學(xué)學(xué)出來.....。我們現(xiàn)在知道了網(wǎng)格項(xiàng)目的數(shù)量，也知道列數(shù)。因此，我們要進(jìn)行行數(shù)最小化可以運(yùn)用此公式Math.ceil(itemsCount/columnsCount)，為什么要最小化行數(shù)，因?yàn)槿绻覀儾捎酶蟮碾S機(jī)整數(shù)作為行數(shù)，那么網(wǎng)格將無法有效填充，整個(gè)布局中會(huì)有一些格子沒能填充上。以下CSS代碼是按列排列的，并且由于我們必須動(dòng)態(tài)的設(shè)置grid-template-rows字段，因此以下代碼中不存在該字段：
完整的代碼，包括CSS部分，如下所示：
可以看到在第16行，會(huì)計(jì)算行數(shù)。在第17行，該grid-template-rows字段是動(dòng)態(tài)設(shè)置的。
在這里，你可以看到數(shù)字以固定的列數(shù)(3)按列排列。同樣，最小化的行數(shù)為五。如果行數(shù)少于五，則無法進(jìn)行排列。并且如果行數(shù)大于五，則布局中將有沒填上的空白空間。僅當(dāng)前一列完全填滿時(shí)，列才開始。
結(jié)尾
這種技巧可以計(jì)算網(wǎng)格布局中要進(jìn)行的行數(shù)并對(duì)其進(jìn)行動(dòng)態(tài)設(shè)置，從而非常輕松地解決了該問題。由于我們需要知道按列排列的行數(shù)，因此可以說，為解決此問題而對(duì)項(xiàng)目進(jìn)行排列時(shí)，行數(shù)和列數(shù)都需要知道。注意：當(dāng)布局的寬度(而不是列數(shù))固定時(shí)，可以采用具有相同類型的解決方案來解決。
分享題目：如何在CSS網(wǎng)格布局中的列中填充項(xiàng)目
文章網(wǎng)址：http://www.dlmjj.cn/article/dpssijc.html
