JavaScript — способ подсчета столбцов в адаптивной сетке

Способ подсчета столбцов в адаптивной сетке

Я думаю, что самый простой способ без грубой силы — рассмотреть простое деление. Вы можете легко найти ширину контейнера, и каждый столбец определяется как minmax(300px,1fr) и мы знаем gap . Используя всю эту информацию, расчет должен быть сделан как ниже:

Если у нас будет N столбцов, то у нас будет N-1 пробел. Мы также знаем, что W должно быть не менее 300px и не может быть больше значения (назовем Wmax ).

Давайте предположим, что разрыв равен 10px .

Если N=2 и каждый столбец равен 300px , ширина контейнера будет равна 300px*2 10px*1 = 610px .

Если N=3 и каждый столбец равен 300px у нас будет 300px*3 10px*2=920px .

Теперь ясно, что если ширина контейнера находится между 610px и 920px у нас будет 2 столбца, потому что нет места для 3 столбцов, но достаточно места для 2 столбцов, которые мы расширяем, чтобы заполнить оставшееся пространство (используя 1fr ), поэтому Wmax в этом регистр (920px - 10px)/2 = 455px . Другими словами, ширина будет варьироваться от 300px до 455px при наличии 2 столбцов.

Таким образом, если мы возьмем формулу 300px*N 10px*(N-1) = Wc с Wc шириной нашего контейнера, вы увидите, что N равно 2 когда Wc=610px и 3 когда Wc=920px и между ними будет результат в [2,3] поэтому мы просто округляем значение до наименьшего (в нашем случае 2), и у нас будет номер нашего столбца.

Вот основной пример:

 var gap = 10; var minW = 200; var Wc = document.querySelector('.grid').offsetWidth; var N = Math.floor((Wc gap)/(minW gap)); console.log(N); window.addEventListener('resize', function(event){ Wc = document.querySelector('.grid').offsetWidth; N = Math.floor((Wc gap)/(minW gap)); console.log(N); }); 
 .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); grid-gap:10px; } span { min-height:50px; background:red; } 
 {amp}lt;div class="grid"{amp}gt; {amp}lt;span{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;span{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;span{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;span{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;span{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;span{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; 

Если вы не знаете значений промежутка и минимальной ширины, вы можете использовать getComputedStyle() чтобы получить разные значения. В этом случае N уже должно быть целым числом, поскольку grid-template-columns предоставит нам вычисленную ширину каждого столбца (на практике у нас все еще будет некоторая доля из-за округления).

 var grid = document.querySelector('.grid'); var gap = parseFloat(window.getComputedStyle(grid,null).getPropertyValue("column-gap")); var minW = parseFloat(window.getComputedStyle(grid,null).getPropertyValue("grid-template-columns")); var Wc = document.querySelector('.grid').offsetWidth; var N = (Wc gap)/(minW gap); console.log(N); window.addEventListener('resize', function(event){ Wc = document.querySelector('.grid').offsetWidth;minW = parseFloat(window.getComputedStyle(grid,null).getPropertyValue("grid-template-columns")) N = (Wc gap)/(minW gap); console.log(N); }); 
 .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); grid-gap:10px; } span { min-height:50px; background:red; } 
 {amp}lt;div class="grid"{amp}gt; {amp}lt;span{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;span{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;span{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;span{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;span{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;span{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector