Как сохранить гибкий контейнер все на одной странице без прокрутки - PullRequest
Новая
       26

Как сохранить гибкий контейнер все на одной странице без прокрутки

0 голосов
/ 05 мая 2019

Я создаю веб-страницу, которая должна отображать некоторые обложки фильмов на одной странице, не прокручивая ее, потому что она будет отображаться. проблема в том, что я хочу изменить размер содержимого, а не делать прокрутку веб-страницы. Мне тоже нужно поддерживать n фильмов (они зависимые). Я пытался использовать flexbox дважды, но он не работает. Кроме того, я использую фреймворк tailwindcss, но я не думаю, что это проблема, так как это просто css в виде классов ... 

<html class='h-full m-0 p-0'>
<head>
  <link href="https://unpkg.com/tailwindcss@next/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class='h-full m-0 p-0'>
  <div class='mx-10 mt-10 flex content-center items-center'>
    <div class='flex flex-wrap'>
<!-- iterate over every movie -->
      <div class='m-2 relative flex-grow h-full' style='flex-basis: 20%'>
        <span class='px-2 py-1 rounded-full bg-blue-500 text-white absolute z-0' style='top: -0.5rem; right: -0.5rem'>0</span>
         <img src='https://images.unsplash.com/photo-1525604803468-3064e402d70c' class: 'w-full' />
         <span class='w-full opacity-75 bg-black text-white py-1 absolute z-0 inset-x-0 bottom-0 text-center px-2'>title</span>
      </div>
<!-- end -->
    </div>
  </div>
</body>
</html>

РЕДАКТИРОВАТЬ: я добавил полный пример (с примером изображения, взятого из unsplash) того, как я хочу, чтобы он выглядел.

1 Ответ

0 голосов
/ 05 мая 2019

Я не думаю, что есть способ сделать то, что вы просите, без JavaScript. В следующем примере я использовал CSS, чтобы поддерживать соотношение обложек, и использовал JavaScript, чтобы рассчитать максимальную ширину, при которой содержимое не будет прокручиваться вертикально.

Вот скрипка . 

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

let numCovers = 10;
let coverList = document.querySelector(".cover-list");

// this function determines what percentage of the cover-list's width
// each cover should take up. It will maximize how large they can be
// without making the total grid size larger than cover-list.
// This should prevent scrolling.
function getBasis() {
  let ratio = 1.35; // height/width
  let width = coverList.clientWidth;
  let height = coverList.clientHeight;
  
  // this loop is really slow, you may want to find a faster way
  let col = 0;
  let accWidth, accHeight, numRows;
  do {
  	col++;
    if (col > numCovers) {
    	// maximize height
      return (height / ratio) + "px";
    }
  	accWidth = width / col;
    accHeight = accWidth * ratio;
    numRows = Math.ceil(numCovers / col);
  } while (accHeight * numRows > height);
  
  return (100 / col) + "%";
}

function generateCovers() {
	// clear existing covers
  coverList.innerHTML = "";
  let basis = getBasis();
  for (let i = 0; i < numCovers; i++) {
    let cover = document.createElement("div");
    cover.classList.add("cover");
    cover.style.flexBasis = basis;
    let inner = document.createElement("div");
    inner.classList.add("inner");
    inner.style.backgroundColor = getRandomColor();
    cover.append(inner);
    coverList.append(cover);
  }
}

let numCoversInput = document.querySelector("#num-covers");
numCoversInput.addEventListener("change", function() {
	numCovers = Math.min(Math.max(this.value, 1), 500);
  this.value = numCovers;
  generateCovers();
});
generateCovers();

window.addEventListener("resize", function() {
  let basis = getBasis();
  coverList.querySelectorAll(".cover").forEach(function(el) {
  	el.style.flexBasis = basis;
  });
});
body {
  /* set margin to computable value for cover-list calcs */
  margin: 5px;
}

#controls {
  height: 25px;
}

.cover-list {
  /* account for margin and controls with calc */
  width: calc(100vw - 10px);
  height: calc(100vh - 35px);
  
  /* use flex so the content will wrap as desired */
  display: flex;
  flex-wrap: wrap;
  align-content: start;
}

.inner {
  /* padding percentages are based on width, so setting
     the height to 0 and padding-bottom to a percentage
     allows us to maintain a ratio */
  width: 100%;
  height: 0;
  padding-bottom: 135%;
}
<div id="controls">
  <label>
    Number of covers: <input id="num-covers" type="number" value="10" min="1" max="500"/>
  </label>
</div>
<div class="cover-list">
</div>
...