<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/clusterize.js@1.0.0/clusterize.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/clusterize.js@1.0.0/clusterize.min.css" rel="stylesheet">
<style>
.list {
display: flex;
flex-wrap: wrap;
}
.item {
width: 100px;
height: 100px;
border: 1px solid black;
margin: 5px;
}
</style>
</head>
<body>
<div id="scrollArea" class="clusterize-scroll">
<div id="contentArea" class="clusterize-content" style="display: flex; flex-wrap: wrap;">
<div class="list"></div>
</div>
</div>
<script>
// Generate some dummy data
var data = [];
for (var i = 0; i < 1000; i++) {
data.push('<div class="item">' + i + '</div>');
}
// Initialize Clusterize.js
var clusterize = new Clusterize({
scrollId: 'scrollArea',
contentId: 'contentArea',
rows_in_block: 50,
tag: 'div'
});
// Update the list with data
clusterize.update(data);
</script>
</body>
</html>
How can i fix?
output:
msedge_bdamq422ox.mp4
Code: