Pycs Layout是一个jQuery插件，用于创建响应迅速、紧凑的图像布局/库，通过保留图像的纵横比和填充最大空间来分发图像

基本用法：

1.在页面中包含jQuery javascript库和jQuery Pycs布局插件。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/pycs-layout.jquery.js"></script> 

2.在页面中包含其他必要的javascript文件。

<script src="js/modernizr.min.js"></script>
<script src="js/foundation.min.js"></script> 

3.按照标记结构创建图像布局/库：

<div class="photos-gallery">
<div class="picture"> <img src="assets/pictures/1.jpg" /> </div>
<div class="picture"> <img src="assets/pictures/2.jpg" /> </div>
<div class="picture"> <img src="assets/pictures/3.jpg" /> </div>
 
...
</div>

4.在加载的页面上初始化插件。

$(window).load( function() {
  $(".photos-gallery").pycsLayout({
    gutter: 4,
    idealHeight: parseInt($(window).height()/2)
}); 

5.所有默认设置。

$(".photos-gallery").pycsLayout({
 
  /* the class of the elements we want to layout. */
  pictureContainer: ".picture",
 
  /* the height we want our elements to have. */
  idealHeight: 150,
 
  /* the horizontal and vertical margin between the elements (in px). */
  gutter: 6,
  
}); 

更新日志：

2023-04-04

• jQuery 3.6的更新+

预览截图

响应式jQuery等高照片库插件 Pycs布局