Вы должны попробовать разбор строки внутри оператора if, выполнив что-то вроде
if(parseMyString(getValue()))
doSomething();
. В parseMyString можно определить, что вам нужно оценить для условия. Если вы не знаете, как создать парсер, посмотрите на: http://www.javapractices.com/topic/TopicAction.do?Id=87
То, что вы хотите, может быть достигнуто тремя способами: CSS мудрый:
.parent {
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-width: {max-width-of-container} /* normally 100%, in a relative container */
min-height: {min-height-of-container}; /* i'd use vh here */
}
.child {
width: {column-width};
display: block;
}
(это решение имеет очень четкое преимущество встроенного column-span
- довольно удобно для названий). Недостатком является упорядочивание элементов в столбцах (первый столбец содержит первую треть элементов и т. Д.). Для этого я сделал jsFiddle .
.parent {
-webkit-columns: {column width} {number of columns}; /* Chrome, Safari, Opera */
-moz-columns: {column width} {number of columns}; /* Firefox */
columns: {column width} {number of columns};
}
.child {
width: {column width};
}
/* where {column width} is usually fixed size
* and {number of columns} is the maximum number of columns.
* Additionally, to avoid breaks inside your elements, you want to add:
*/
.child {
display: inline-block;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid-column;
}
абсолютное позиционирование после вычисления размеров сделанных элементов, через JavaScript (плацдарм кладки).
Вы можете добиться эффекта каменной кладки в соответствии с вашим снимком экрана, но вы установили высоту внешнего div динамически
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.item-list {
max-width: 400px;
border: 1px solid red;
display: -ms-flexbox;
-ms-flex-direction: column;
-ms-flex-wrap: wrap;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100vw;
}
.item-list__item {
border: 1px solid green;
width: 50%;
}
<div class="item-list" >
<div class="item-list__item">
Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. Therefore by applauded acuteness supported affection it. Except had sex limits
county enough the figure former add. Do sang my he next mr soon. It merely waited do unable.
</div>
<div class="item-list__item">
Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do.
</div>
<div class="item-list__item">
Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. Therefore by applauded acuteness supported affection it. Except had sex limits
</div>
<div class="item-list__item">
Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do.
</div>
<div class="item-list__item">
Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. Therefore by applauded acuteness supported affection it. Except had sex limits
</div>
</div>
подход column
кажется хорошим компромиссом, если вы установите column-width
через vmin
или vmax
единицы и drop column-count
(первый фрагмент), display:grid
и vmin
также являются опцией для futur (второй фрагмент).
фрагмент вдохновлен ответом @Lanti.
blockquote>тестовая демонстрация с vmin
.container { } ul { margin: 0; padding: 0; } ul li { list-style: none; font-size: 0; } .portfolio ul { -webkit-column-width:50vmin; -moz-column-width:50vmin; column-width:50vmin; -webkit-column-fill:balance; -moz-column-fill:balance; column-fill:balance; -webkit-column-gap: 3px; -moz-column-gap: 3px; column-gap: 3px; } .portfolio ul:hover img { opacity: 0.3; } .portfolio ul:hover img:hover { opacity: 1; } .portfolio ul li { margin-bottom: 3px; } .portfolio ul li img { max-width: 100%; transition: 0.8s opacity; }
<section class="container portfolio"> <ul> <li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_2959-1400px.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-010.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_6188-dng-k.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/20151220-csaladi-peregi-046-k.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/20151230-csalad-szalai-0194-k.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-001(1).jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171819-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171829-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171938-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171953-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528194754-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528184948-portfolio.jpg" alt="" /></li> </ul> </section>
ссылка среди других https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin- vmax /
display:grid
coud делает это также простым с автозаполнением, но для этого требуется установить значение диапазона до самого высокого изображения, чтобы строки и столбцы могли inbricate
.container {} ul { margin: 0; padding: 0; } ul li { list-style: none; font-size: 0; } .portfolio ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(50vmin, 1fr)); grid-gap: 5px; grid-auto-rows: minmax(10px, 1fr); grid-auto-flow: dense; } .portfolio ul:hover img { opacity: 0.3; } .portfolio ul:hover img:hover { opacity: 1; } .portfolio ul li { margin-bottom: 3px; } .portfolio ul li img { max-width: 100%; transition: 0.8s opacity; } li { border: solid blue; grid-row-end: span 1; display: flex; align-items: center; background: lightgray; } li:nth-child(1), li:nth-child(3), li:nth-child(6), li:nth-child(7), li:nth-child(8), li:nth-child(9), li:nth-child(10), li:nth-child(11) { border: solid red; grid-row-end: span 2 }
<section class="container portfolio"> <ul> <li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_2959-1400px.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-010.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_6188-dng-k.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/20151220-csaladi-peregi-046-k.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/20151230-csalad-szalai-0194-k.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-001(1).jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171819-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171829-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171938-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171953-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528194754-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528184948-portfolio.jpg" alt="" /></li> </ul> </section>
вы можете видеть https://css-tricks.com/snippets/css/complete-guide-grid/
Вместо flexbox
я рекомендую использовать столбцы для таких сеток. Как вы можете видеть, расстояние на нижних изображениях может быть лучше, но для собственного решения для CSS я считаю, что это довольно аккуратно. Нет больше JS:
.container {
max-width: 900px;
width: 100%;
margin: 0 auto;
}
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
font-size: 0;
}
.portfolio ul {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 3px;
-webkit-column-gap: 3px;
column-gap: 3px;
}
.portfolio ul:hover img {
opacity: 0.3;
}
.portfolio ul:hover img:hover {
opacity: 1;
}
.portfolio ul li {
margin-bottom: 3px;
}
.portfolio ul li img {
max-width: 100%;
transition: 0.8s opacity;
}
<section class="container portfolio">
<ul>
<li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_2959-1400px.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-010.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_6188-dng-k.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/20151220-csaladi-peregi-046-k.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/20151230-csalad-szalai-0194-k.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-001(1).jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528171819-portfolio.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528171829-portfolio.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528171938-portfolio.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528171953-portfolio.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528194754-portfolio.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528184948-portfolio.jpg" alt="" /></li>
</ul>
</section>
Flexbox - это «одномерная» система компоновки: она может выравнивать элементы вдоль горизонтальных или вертикальных линий.
Истинная сетка «2-мерная»: она может выравнивать элементы вдоль горизонтальной и вертикальной линий. Другими словами, ячейки могут располагаться между столбцами и строками, которые невозможно выполнить с помощью flexbox.
Вот почему flexbox имеет ограниченную емкость для построения гридов. Это также является причиной того, что W3C разработал еще одну технологию CSS3, Grid Layout (см. Ниже).
В контейнере flex с flex-flow: row wrap
элементы гибкости должны быть завернуты к новым строкам .
Это означает, что элемент гибкости нельзя обернуть под другим элементом в той же строке .
Обратите внимание, что div # 3 обертывается ниже div # 1 , создавая новую строку. Он не может упасть ниже div # 2 .
В результате, когда элементы не самые высокие в строке, остается пустое пространство, создавая неприглядные пробелы.
image credit: Jefree Sujit
column wrap
Решение Если вы переключитесь на flex-flow: column wrap
, элементы гибки будут стекаться вертикально, а сетчатая компоновка более достижима. Однако контейнер с колоновым направлением имеет три потенциальные проблемы сразу:
В результате контейнер со столбцом может быть невозможен во многих случаях.
order
для повторной компоновки вашего макета (например, в медиа-запросах), этот метод может устранить эту опцию.