- 15, May 2024
- #1
Всем здравствуйте,
В настоящее время я использую jquery + «изотроп», чтобы создать галерею изображений, в которой изображения можно фильтровать с помощью «фильтров данных». Но «Изотоп» использует сетки для организации элементов управления, но мне бы хотелось что-то вроде следующего изображения, в котором нет сетки или случайного позиционирования.
Знаете ли вы, как я могу настроить «Изотроп», чтобы он выглядел более рыхлым или свободным от какой-либо каменной кладки или сетчатой системы?
Ближе всего у меня получилось, как показано ниже, но, как вы можете видеть в jsfiddle, между элементами div нет зазора, и он по-прежнему очень похож на сетку.
Скрипка: https://jsfiddle.net/postcolonialboy/w31L4wkw/
HTML
В настоящее время я использую jquery + «изотроп», чтобы создать галерею изображений, в которой изображения можно фильтровать с помощью «фильтров данных». Но «Изотоп» использует сетки для организации элементов управления, но мне бы хотелось что-то вроде следующего изображения, в котором нет сетки или случайного позиционирования.
Знаете ли вы, как я могу настроить «Изотроп», чтобы он выглядел более рыхлым или свободным от какой-либо каменной кладки или сетчатой системы?
Ближе всего у меня получилось, как показано ниже, но, как вы можете видеть в jsfiddle, между элементами div нет зазора, и он по-прежнему очень похож на сетку.
Скрипка: https://jsfiddle.net/postcolonialboy/w31L4wkw/
HTML
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
body {
font-family: "Helvetica Neue", sans-serif;
max-width: 95%;
margin: 0 auto;
padding-top: 5%;
}
.isotope {
background: 0;
max-width: 95%;
margin: 0 auto
}
.isotope:after {
content: '';
display: block;
clear: both
}
.item {
float: left;
width: 332px;
height: 213px;
background: 0;
border: 1px solid black
}
.item.width2 {
width: 321px;
}
.item.height2 {
height: 342px;
}
.item.width3 {
width: 472px;
}
.item.height3 {
height: 431px;
} jQuery(window).on("load resize", function(e) { var $container = $('.isotope'), colWidth = function() { var w = $container.width(), columnNum = 1, columnWidth = 0; //Select what will be your projects columns according to container width if (w > 1040) { columnNum = 6; } else if (w > 850) { columnNum = 5; } else if (w > 768) { columnNum = 4; } else if (w > 480) { columnNum = 3; } else if (w > 300) { columnNum = 2; } columnWidth = Math.floor(w / columnNum); //Default item width and height $container.find('.item').each(function() { var $item = $(this), width = columnWidth, height = columnWidth; $item.css({ width: width, height: height }); }); //2.4x width item width and height $container.find('.width2').each(function() { var $item = $(this), width = columnWidth * 2.4, height = columnWidth; $item.css({ width: width, height: height }); }); //2.4x height item width and height $container.find('.height2').each(function() { var $item = $(this), width = columnWidth, height = columnWidth * 2.4; $item.css({ width: width, height: height }); }); //2.4x item width and height $container.find('.width2.height2').each(function() { var $item = $(this), width = columnWidth * 2.4, height = columnWidth * 2.4; $item.css({ width: width, height: height }); }); //3.3x width item width and height $container.find('.width3').each(function() { var $item = $(this), width = columnWidth * 3.3, height = columnWidth; $item.css({ width: width, height: height }); }); //3.3x height item width and height $container.find('.height3').each(function() { var $item = $(this), width = columnWidth, height = columnWidth * 3.3; $item.css({ width: width, height: height }); }); //3.3x item width and height $container.find('.width3.height3').each(function() { var $item = $(this), width = columnWidth * 3.3, height = columnWidth * 3.3; $item.css({ width: width, height: height }); }); return columnWidth; }, isotope = function() { $container.isotope({ resizable: true, itemSelector: '.item', masonry: { columnWidth: colWidth(), gutterWidth: 15, } }); }; isotope(); <div class="isotope"> <div class="item cat-2 height2 width2 cat-4">width3</div> <div class="item height2 width2 cat-4">height2</div> <div class="item cat-2">normal</div> <div class="item cat-1 height3 width3">height3</div> <div class="item cat-2 cat-4 height3 width3">normal</div> <div class="item cat-2">normal</div> <div class="item cat-2 cat-3">normal</div> <div class="item height2 width2">width2 height3</div> <div class="item height2 width2">width2</div> <div class="item height2 width2 cat-4">width2</div> <div class="item cat-1 height2 width2">height2</div> <div class="item cat-2 cat-3 height3 width3">width3</div> <div class="item cat-3 height3 width3">height3</div> <div class="item cat-3 width2 height2 cat-1">width2 height2</div> <div class="item height2 width2 cat-4 cat-1">width2</div> <div class="item height2 width2 cat-3">height2</div> <div class="item cat-1 cat-3 height3 width3">width3</div> </div>
![Обучение составлению семантического ядра Key Collector (28 поток) [февраль 2017]](/assets/images/icons/forum0.png){kind=icon}
![[Чеузов Кирилл] - Сам себе](/assets/images/icons/forum7.png){kind=icon}