Фильтрация и сортировка элементов

Фильтрация и сортировка элементов

В данной теме нет описания самой библиотеки Isotope, а лишь представлены несколько готовых примеров для фильтрации и сортировки элементов.

Пример фильтрации:

Нет результатов

HTML:

<div class="filters">
	<div class="filter-group">
		<div class="button-group" data-filter-group="color">
			<button class="filter-button is-checked" data-filter="">Все</button>
			<button class="filter-button" data-filter=".red">Красный</button>
			<button class="filter-button" data-filter=".blue">Синий</button>
			<button class="filter-button" data-filter=".green">Зеленый</button>
			<button class="filter-button" data-filter=".yellow">Желтый</button>		
		</div>
	</div>
	<div class="filter-group">
		<div class="button-group" data-filter-group="shape">
			<button class="filter-button is-checked" data-filter="">Все</button>
			<button class="filter-button" data-filter=".round">Круг</button>
			<button class="filter-button" data-filter=".square">Квадрат</button>
		</div>
	</div>
</div>
<div class="filter-grid">
	<div class="color-shape round red"></div>
	<div class="color-shape round blue"></div>
	<div class="color-shape round green"></div>
	<div class="color-shape square red"></div>
	<div class="color-shape square blue"></div>
	<div class="color-shape square green"></div>
	<div class="color-shape round red"></div>
	<div class="color-shape round blue"></div>
	<div class="color-shape round green"></div>
	<div class="color-shape square red"></div>
	<div class="color-shape square blue"></div>
	<div class="color-shape square green"></div>
	<div class="color-shape round red"></div>
	<div class="color-shape round blue"></div>
	<div class="color-shape round green"></div>
	<div class="color-shape square red"></div>
	<div class="color-shape square blue"></div>
	<div class="color-shape square green"></div>
	<div class="color-shape round red"></div>
	<div class="color-shape round blue"></div>
	<div class="color-shape round green"></div>
	<div class="color-shape square red"></div>
	<div class="color-shape square blue"></div>
	<div class="color-shape square green"></div>
</div>
<div class="no-results">Нет результатов</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

<div class="filters">

<div class="filter-group">

<div class="button-group" data-filter-group="color">

<button class="filter-button is-checked" data-filter="">Все</button>

<button class="filter-button" data-filter=".red">Красный</button>

<button class="filter-button" data-filter=".blue">Синий</button>

<button class="filter-button" data-filter=".green">Зеленый</button>

<button class="filter-button" data-filter=".yellow">Желтый</button>

</div>

</div>

<div class="filter-group">

<div class="button-group" data-filter-group="shape">

<button class="filter-button is-checked" data-filter="">Все</button>

<button class="filter-button" data-filter=".round">Круг</button>

<button class="filter-button" data-filter=".square">Квадрат</button>

</div>

</div>

</div>

<div class="filter-grid">

<div class="color-shape round red"></div>

<div class="color-shape round blue"></div>

<div class="color-shape round green"></div>

<div class="color-shape square red"></div>

<div class="color-shape square blue"></div>

<div class="color-shape square green"></div>

<div class="color-shape round red"></div>

<div class="color-shape round blue"></div>

<div class="color-shape round green"></div>

<div class="color-shape square red"></div>

<div class="color-shape square blue"></div>

<div class="color-shape square green"></div>

<div class="color-shape round red"></div>

<div class="color-shape round blue"></div>

<div class="color-shape round green"></div>

<div class="color-shape square red"></div>

<div class="color-shape square blue"></div>

<div class="color-shape square green"></div>

<div class="color-shape round red"></div>

<div class="color-shape round blue"></div>

<div class="color-shape round green"></div>

<div class="color-shape square red"></div>

<div class="color-shape square blue"></div>

<div class="color-shape square green"></div>

</div>

<div class="no-results">Нет результатов</div>

CSS:

.filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 10px -2px;
	font: 0/0 a;
}
.filter-group {
	margin: 10px 0;
}
.filter-button {
	display: inline-flex;
	margin: 0 2px 4px 2px;
	text-decoration: none;
	font-size: 13px;
	line-height: 1;
	padding: 4px 16px;
	color: #337AB7;
	font-weight: 600;
	text-transform: uppercase;
	font-family: 'Roboto', Тahoma, sans-serif;
	background: #FFF;
	cursor: pointer;
	border: 2px solid #BFE2FF;
	border-radius: 6px;
	transition: 0.3s;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.1);
}
.filter-button:hover,
.filter-button.is-checked {
	color: #BFE2FF;
	background: #337AB7;
	border: 2px solid #337AB7;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);
}
.no-results {
	text-align: center;
	display: none;
	color: red;
}
/* Фигуры */
.color-shape {
	width: 70px;
	height: 70px;
	margin: 5px;
	float: left;
}
.color-shape.round {
	border-radius: 35px;
}
.color-shape.red { 
	background: red; 
}
.color-shape.blue { 
	background: blue; 
}
.color-shape.green { 
	background: green; 
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

.filters {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

margin: 10px -2px;

font: 0/0 a;

}

.filter-group {

margin: 10px 0;

}

.filter-button {

display: inline-flex;

margin: 0 2px 4px 2px;

text-decoration: none;

font-size: 13px;

line-height: 1;

padding: 4px 16px;

color: #337AB7;

font-weight: 600;

text-transform: uppercase;

font-family: 'Roboto', Тahoma, sans-serif;

background: #FFF;

cursor: pointer;

border: 2px solid #BFE2FF;

border-radius: 6px;

transition: 0.3s;

box-shadow: 0 2px 5px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.1);

}

.filter-button:hover,

.filter-button.is-checked {

color: #BFE2FF;

background: #337AB7;

border: 2px solid #337AB7;

box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);

}

.no-results {

text-align: center;

display: none;

color: red;

}

/* Фигуры */

.color-shape {

width: 70px;

height: 70px;

margin: 5px;

float: left;

}

.color-shape.round {

border-radius: 35px;

}

.color-shape.red {

background: red;

}

.color-shape.blue {

background: blue;

}

.color-shape.green {

background: green;

}

jQuery:

Подключаем библиотеку Isotope со своего сайта, скачав и подключив скрипт isotope.pkgd.min.js или с CDN:

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

1	<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

И скрипт ниже (также не забываем про jQuery):

var $grid = $('.filter-grid').isotope({
	itemSelector: '.color-shape'
});
var filters = {};
$('.filters').on( 'click', '.filter-button', function( event ) {
	var $button = $( event.currentTarget );
	var $buttonGroup = $button.parents('.button-group');
	var filterGroup = $buttonGroup.attr('data-filter-group');
	filters[ filterGroup ] = $button.attr('data-filter');
	var filterValue = concatValues( filters );
	$grid.isotope({ filter: filterValue });
	var visibleItemsCount = $grid.data('isotope').filteredItems.length;
	if( visibleItemsCount > 0 ){
		$('.no-results').hide();
	}
	else{
		$('.no-results').fadeIn();
	}
});
$('.button-group').each( function( i, buttonGroup ) {
	var $buttonGroup = $( buttonGroup );
	$buttonGroup.on( 'click', '.filter-button', function( event ) {
		console.log("2")
		$buttonGroup.find('.is-checked').removeClass('is-checked');
		var $button = $( event.currentTarget );
		$button.addClass('is-checked');
	});
});
function concatValues( obj ) {
	var value = '';
	for ( var prop in obj ) {
		value += obj[ prop ];
	}
	return value;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

var $grid = $('.filter-grid').isotope({

itemSelector: '.color-shape'

});

var filters = {};

$('.filters').on( 'click', '.filter-button', function( event ) {

var $button = $( event.currentTarget );

var $buttonGroup = $button.parents('.button-group');

var filterGroup = $buttonGroup.attr('data-filter-group');

filters[ filterGroup ] = $button.attr('data-filter');

var filterValue = concatValues( filters );

$grid.isotope({ filter: filterValue });

var visibleItemsCount = $grid.data('isotope').filteredItems.length;

if( visibleItemsCount > 0 ){

$('.no-results').hide();

}

else{

$('.no-results').fadeIn();

}

});

$('.button-group').each( function( i, buttonGroup ) {

var $buttonGroup = $( buttonGroup );

$buttonGroup.on( 'click', '.filter-button', function( event ) {

console.log("2")

$buttonGroup.find('.is-checked').removeClass('is-checked');

var $button = $( event.currentTarget );

$button.addClass('is-checked');

});

});

function concatValues( obj ) {

var value = '';

for ( var prop in obj ) {

value += obj[ prop ];

}

return value;

}

Пример сортировки:

Mercury

Hg

80

200.59

Tellurium

Te

52

127.6

Bismuth

Bi

83

208.980

Lead

Pb

82

207.2

Gold

Au

79

196.967

Potassium

K

19

39.0983

Sodium

Na

11

22.99

Cadmium

Cd

48

112.411

Calcium

Ca

20

40.078

Rhenium

Re

75

186.207

Thallium

Tl

81

204.383

Antimony

Sb

51

121.76

Cobalt

Co

27

58.933

Ytterbium

Yb

70

173.054

Argon

Ar

18

39.948

Nitrogen

N

7

14.007

Uranium

U

92

238.029

Plutonium

Pu

94

(244)

HTML:

<div class="sort-button-group">
	<button class="sort-button is-checked" data-sort-value="original-order">По умолчанию</button>
	<button class="sort-button" data-sort-value="name">Имя</button>
	<button class="sort-button" data-sort-value="symbol">Символ</button>
	<button class="sort-button" data-sort-value="number">Номер</button>
	<button class="sort-button" data-sort-value="weight">Вес</button>
	<button class="sort-button" data-sort-value="category">Категория</button>
</div>
<div class="sort-grid">
	<div class="element-item transition metal " data-category="transition">
		<h3 class="name">Mercury</h3>
		<p class="symbol">Hg</p>
		<p class="number">80</p>
		<p class="weight">200.59</p>
	</div>
	<div class="element-item metalloid " data-category="metalloid">
		<h3 class="name">Tellurium</h3>
		<p class="symbol">Te</p>
		<p class="number">52</p>
		<p class="weight">127.6</p>
	</div>
	<div class="element-item post-transition metal " data-category="post-transition">
		<h3 class="name">Bismuth</h3>
		<p class="symbol">Bi</p>
		<p class="number">83</p>
		<p class="weight">208.980</p>
	</div>
	<div class="element-item post-transition metal " data-category="post-transition">
		<h3 class="name">Lead</h3>
		<p class="symbol">Pb</p>
		<p class="number">82</p>
		<p class="weight">207.2</p>
	</div>
	<div class="element-item transition metal " data-category="transition">
		<h3 class="name">Gold</h3>
		<p class="symbol">Au</p>
		<p class="number">79</p>
		<p class="weight">196.967</p>
	</div>
	<div class="element-item alkali metal " data-category="alkali">
		<h3 class="name">Potassium</h3>
		<p class="symbol">K</p>
		<p class="number">19</p>
		<p class="weight">39.0983</p>
	</div>
	<div class="element-item alkali metal " data-category="alkali">
		<h3 class="name">Sodium</h3>
		<p class="symbol">Na</p>
		<p class="number">11</p>
		<p class="weight">22.99</p>
	</div>
	<div class="element-item transition metal " data-category="transition">
		<h3 class="name">Cadmium</h3>
		<p class="symbol">Cd</p>
		<p class="number">48</p>
		<p class="weight">112.411</p>
	</div>
	<div class="element-item alkaline-earth metal " data-category="alkaline-earth">
		<h3 class="name">Calcium</h3>
		<p class="symbol">Ca</p>
		<p class="number">20</p>
		<p class="weight">40.078</p>
	</div>
	<div class="element-item transition metal " data-category="transition">
		<h3 class="name">Rhenium</h3>
		<p class="symbol">Re</p>
		<p class="number">75</p>
		<p class="weight">186.207</p>
	</div>
	<div class="element-item post-transition metal " data-category="post-transition">
		<h3 class="name">Thallium</h3>
		<p class="symbol">Tl</p>
		<p class="number">81</p>
		<p class="weight">204.383</p>
	</div>
	<div class="element-item metalloid " data-category="metalloid">
		<h3 class="name">Antimony</h3>
		<p class="symbol">Sb</p>
		<p class="number">51</p>
		<p class="weight">121.76</p>
	</div>
	<div class="element-item transition metal " data-category="transition">
		<h3 class="name">Cobalt</h3>
		<p class="symbol">Co</p>
		<p class="number">27</p>
		<p class="weight">58.933</p>
	</div>
	<div class="element-item lanthanoid metal inner-transition " data-category="lanthanoid">
		<h3 class="name">Ytterbium</h3>
		<p class="symbol">Yb</p>
		<p class="number">70</p>
		<p class="weight">173.054</p>
	</div>
	<div class="element-item noble-gas nonmetal " data-category="noble-gas">
		<h3 class="name">Argon</h3>
		<p class="symbol">Ar</p>
		<p class="number">18</p>
		<p class="weight">39.948</p>
	</div>
	<div class="element-item diatomic nonmetal " data-category="diatomic">
		<h3 class="name">Nitrogen</h3>
		<p class="symbol">N</p>
		<p class="number">7</p>
		<p class="weight">14.007</p>
	</div>
	<div class="element-item actinoid metal inner-transition " data-category="actinoid">
		<h3 class="name">Uranium</h3>
		<p class="symbol">U</p>
		<p class="number">92</p>
		<p class="weight">238.029</p>
	</div>
	<div class="element-item actinoid metal inner-transition " data-category="actinoid">
		<h3 class="name">Plutonium</h3>
		<p class="symbol">Pu</p>
		<p class="number">94</p>
		<p class="weight">(244)</p>
	</div>
</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

<div class="sort-button-group">

<button class="sort-button is-checked" data-sort-value="original-order">По умолчанию</button>

<button class="sort-button" data-sort-value="name">Имя</button>

<button class="sort-button" data-sort-value="symbol">Символ</button>

<button class="sort-button" data-sort-value="number">Номер</button>

<button class="sort-button" data-sort-value="weight">Вес</button>

<button class="sort-button" data-sort-value="category">Категория</button>

</div>

<div class="sort-grid">

<div class="element-item transition metal " data-category="transition">

<h3 class="name">Mercury</h3>

<p class="symbol">Hg</p>

<p class="number">80</p>

<p class="weight">200.59</p>

</div>

<div class="element-item metalloid " data-category="metalloid">

<h3 class="name">Tellurium</h3>

<p class="symbol">Te</p>

<p class="number">52</p>

<p class="weight">127.6</p>

</div>

<div class="element-item post-transition metal " data-category="post-transition">

<h3 class="name">Bismuth</h3>

<p class="symbol">Bi</p>

<p class="number">83</p>

<p class="weight">208.980</p>

</div>

<div class="element-item post-transition metal " data-category="post-transition">

<h3 class="name">Lead</h3>

<p class="symbol">Pb</p>

<p class="number">82</p>

<p class="weight">207.2</p>

</div>

<div class="element-item transition metal " data-category="transition">

<h3 class="name">Gold</h3>

<p class="symbol">Au</p>

<p class="number">79</p>

<p class="weight">196.967</p>

</div>

<div class="element-item alkali metal " data-category="alkali">

<h3 class="name">Potassium</h3>

<p class="symbol">K</p>

<p class="number">19</p>

<p class="weight">39.0983</p>

</div>

<div class="element-item alkali metal " data-category="alkali">

<h3 class="name">Sodium</h3>

<p class="symbol">Na</p>

<p class="number">11</p>

<p class="weight">22.99</p>

</div>

<div class="element-item transition metal " data-category="transition">

<h3 class="name">Cadmium</h3>

<p class="symbol">Cd</p>

<p class="number">48</p>

<p class="weight">112.411</p>

</div>

<div class="element-item alkaline-earth metal " data-category="alkaline-earth">

<h3 class="name">Calcium</h3>

<p class="symbol">Ca</p>

<p class="number">20</p>

<p class="weight">40.078</p>

</div>

<div class="element-item transition metal " data-category="transition">

<h3 class="name">Rhenium</h3>

<p class="symbol">Re</p>

<p class="number">75</p>

<p class="weight">186.207</p>

</div>

<div class="element-item post-transition metal " data-category="post-transition">

<h3 class="name">Thallium</h3>

<p class="symbol">Tl</p>

<p class="number">81</p>

<p class="weight">204.383</p>

</div>

<div class="element-item metalloid " data-category="metalloid">

<h3 class="name">Antimony</h3>

<p class="symbol">Sb</p>

<p class="number">51</p>

<p class="weight">121.76</p>

</div>

<div class="element-item transition metal " data-category="transition">

<h3 class="name">Cobalt</h3>

<p class="symbol">Co</p>

<p class="number">27</p>

<p class="weight">58.933</p>

</div>

<div class="element-item lanthanoid metal inner-transition " data-category="lanthanoid">

<h3 class="name">Ytterbium</h3>

<p class="symbol">Yb</p>

<p class="number">70</p>

<p class="weight">173.054</p>

</div>

<div class="element-item noble-gas nonmetal " data-category="noble-gas">

<h3 class="name">Argon</h3>

<p class="symbol">Ar</p>

<p class="number">18</p>

<p class="weight">39.948</p>

</div>

<div class="element-item diatomic nonmetal " data-category="diatomic">

<h3 class="name">Nitrogen</h3>

<p class="symbol">N</p>

<p class="number">7</p>

<p class="weight">14.007</p>

</div>

<div class="element-item actinoid metal inner-transition " data-category="actinoid">

<h3 class="name">Uranium</h3>

<p class="symbol">U</p>

<p class="number">92</p>

<p class="weight">238.029</p>

</div>

<div class="element-item actinoid metal inner-transition " data-category="actinoid">

<h3 class="name">Plutonium</h3>

<p class="symbol">Pu</p>

<p class="number">94</p>

<p class="weight">(244)</p>

</div>

</div>

CSS:

.sort-button-group {
	margin: 20px 2px;
	font: 0/0 a;
}
.sort-button {
	display: inline-flex;
	margin: 0 2px 4px 2px;
	text-decoration: none;
	font-size: 13px;
	line-height: 1;
	padding: 4px 16px;
	color: #337AB7;
	font-weight: 600;
	text-transform: uppercase;
	font-family: 'Roboto', Тahoma, sans-serif;
	background: #FFF;
	cursor: pointer;
	border: 2px solid #BFE2FF;
	border-radius: 6px;
	transition: 0.3s;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.1);
}
.sort-button:hover,
.sort-button.is-checked {
	color: #BFE2FF;
	background: #337AB7;
	border: 2px solid #337AB7;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);
}
.no-results {
	text-align: center;
	display: none;
	color: red;
}

/* Элементы */
.element-item {
	position: relative;
	float: left;
	width: 100px;
	height: 100px;
	margin: 5px;
	padding: 10px;
	background: #888;
	color: #262524;
}
.element-item > * {
	margin: 0;
	padding: 0;
}
.element-item .name {
	position: absolute;
	left: 10px;
	top: 60px;
	text-transform: none;
	letter-spacing: 0;
	font-size: 12px;
	font-weight: normal;
}
.element-item .symbol {
	position: absolute;
	left: 10px;
	font-size: 42px;
	font-weight: bold;
	color: white;
}
.element-item .number {
	position: absolute;
	right: 8px;
	top: 5px;
}
.element-item .weight {
	position: absolute;
	left: 10px;
	top: 76px;
	font-size: 12px;
}
.element-item.alkali {
	background: hsl(0, 100%, 50%); 
}
.element-item.alkaline-earth {
	background: hsl(36, 100%, 50%); 
}
.element-item.lanthanoid {
	background: hsl(72, 100%, 50%); 
}
.element-item.actinoid {
	background: hsl(108, 100%, 50%); 
}
.element-item.transition { 
	background: hsl(144, 100%, 50%); 
}
.element-item.post-transition { 
	background: hsl(180, 100%, 50%); 
}
.element-item.metalloid { 
	background: hsl(216, 100%, 50%); 
}
.element-item.diatomic { 
	background: hsl(252, 100%, 50%); 
}
.element-item.halogen { 
	background: hsl(288, 100%, 50%); 
}
.element-item.noble-gas { 
	background: hsl(324, 100%, 50%); 
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

.sort-button-group {

margin: 20px 2px;

font: 0/0 a;

}

.sort-button {

display: inline-flex;

margin: 0 2px 4px 2px;

text-decoration: none;

font-size: 13px;

line-height: 1;

padding: 4px 16px;

color: #337AB7;

font-weight: 600;

text-transform: uppercase;

font-family: 'Roboto', Тahoma, sans-serif;

background: #FFF;

cursor: pointer;

border: 2px solid #BFE2FF;

border-radius: 6px;

transition: 0.3s;

box-shadow: 0 2px 5px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.1);

}

.sort-button:hover,

.sort-button.is-checked {

color: #BFE2FF;

background: #337AB7;

border: 2px solid #337AB7;

box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);

}

.no-results {

text-align: center;

display: none;

color: red;

}

/* Элементы */

.element-item {

position: relative;

float: left;

width: 100px;

height: 100px;

margin: 5px;

padding: 10px;

background: #888;

color: #262524;

}

.element-item > * {

margin: 0;

padding: 0;

}

.element-item .name {

position: absolute;

left: 10px;

top: 60px;

text-transform: none;

letter-spacing: 0;

font-size: 12px;

font-weight: normal;

}

.element-item .symbol {

position: absolute;

left: 10px;

font-size: 42px;

font-weight: bold;

color: white;

}

.element-item .number {

position: absolute;

right: 8px;

top: 5px;

}

.element-item .weight {

position: absolute;

left: 10px;

top: 76px;

font-size: 12px;

}

.element-item.alkali {

background: hsl(0, 100%, 50%);

}

.element-item.alkaline-earth {

background: hsl(36, 100%, 50%);

}

.element-item.lanthanoid {

background: hsl(72, 100%, 50%);

}

.element-item.actinoid {

background: hsl(108, 100%, 50%);

}

.element-item.transition {

background: hsl(144, 100%, 50%);

}

.element-item.post-transition {

background: hsl(180, 100%, 50%);

}

.element-item.metalloid {

background: hsl(216, 100%, 50%);

}

.element-item.diatomic {

background: hsl(252, 100%, 50%);

}

.element-item.halogen {

background: hsl(288, 100%, 50%);

}

.element-item.noble-gas {

background: hsl(324, 100%, 50%);

}

jQuery:

Подключаем библиотеку Isotope со своего сайта, скачав и подключив скрипт isotope.pkgd.min.js или с CDN:

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

1	<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

И скрипт ниже (также не забываем про jQuery):

var $sgrid = $('.sort-grid').isotope({
	itemSelector: '.element-item',
	layoutMode: 'fitRows',
	getSortData: {
		name: '.name',
		symbol: '.symbol',
		number: '.number parseInt',
		category: '[data-category]',
		weight: function( itemElem ) {
			var weight = $( itemElem ).find('.weight').text();
			return parseFloat( weight.replace( /[\(\)]/g, '') );
		}
	}
});
$('.sort-button-group').on( 'click', '.sort-button', function() {
	var sortValue = $(this).attr('data-sort-value');
	$sgrid.isotope({ sortBy: sortValue });
});
$('.sort-button-group').each( function( i, buttonGroup ) {
	var $buttonGroup = $( buttonGroup );
	$buttonGroup.on( 'click', '.sort-button', function() {
		$buttonGroup.find('.is-checked').removeClass('is-checked');
		$( this ).addClass('is-checked');
	});
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

var $sgrid = $('.sort-grid').isotope({

itemSelector: '.element-item',

layoutMode: 'fitRows',

getSortData: {

name: '.name',

symbol: '.symbol',

number: '.number parseInt',

category: '[data-category]',

weight: function( itemElem ) {

var weight = $( itemElem ).find('.weight').text();

return parseFloat( weight.replace( /[\(\)]/g, '') );

}

}

});

$('.sort-button-group').on( 'click', '.sort-button', function() {

var sortValue = $(this).attr('data-sort-value');

$sgrid.isotope({ sortBy: sortValue });

});

$('.sort-button-group').each( function( i, buttonGroup ) {

var $buttonGroup = $( buttonGroup );

$buttonGroup.on( 'click', '.sort-button', function() {

$buttonGroup.find('.is-checked').removeClass('is-checked');

$( this ).addClass('is-checked');

});

});

Сайт авторов isotope.metafizzy.co
Библиотека Isotope на github

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на смартфоне Открыть QR-код для перехода на эту страницу с телефона

Помощь по установке кода Ответы на часто задаваемые вопросы и решение типовых ошибок и проблем

Страница находится в стадии разработки

Поддержать блог Любые Ваши (пусть даже и скромные) суммы значительно повышают мотивацию развивать блог, делиться наработками и придумывать новые.

Опубликовано: 30.08.2022 / Обновлено: 21.12.2022
Рубрики: Вкладки, блоки и списки
Метки: jQuery
4336 просмотров

Смотрите также:

Эффект выделения блока при наведении курсора

Плавный переход фона от блока к блоку при наведении на них курсора мыши

Параллакс-эффекты с библиотекой parallax.js

Небольшая, но удобная библиотека parallax.js для добавления тегам параллакс-эффектов

Оформление списка, сгруппированного по алфавиту

Вариант оформления списка, сгруппированного по первым буквам

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

Антон: 20.09.2022 в 09:29

Спасибо, классная вещь))

Ответить