jQuery masonry是一個流式布局插件，它可以幫助我們創建像Pinterest一樣的網格布局。這個插件可以自動調整元素的大小和位置，讓我們的網頁看起來更加美觀。在這里我們將會看到一個使用jQuery masonry的簡單示例。

<!-- 引入 jQuery 和 masonry.js -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
<!-- 創建一個包含元素的容器 -->
<div id="container">
<div class="item"><img src="1.jpg" alt=""/></div>
<div class="item"><img src="2.jpg" alt=""/></div>
<div class="item"><img src="3.jpg" alt=""/></div>
<div class="item"><img src="4.jpg" alt=""/></div>
<div class="item"><img src="5.jpg" alt=""/></div>
<div class="item"><img src="6.jpg" alt=""/></div>
<div class="item"><img src="7.jpg" alt=""/></div>
<div class="item"><img src="8.jpg" alt=""/></div>
</div>
<script>
$(document).ready(function(){
// 初始化容器
$('#container').masonry({
itemSelector: '.item',
columnWidth: 200
});
});
</script>

在上面的代碼中，我們首先引入了jQuery和masonry.js，然后在一個