Today I recommend a very easy-to-use Macy.js plug-in. It is a flow layout JS plug-in that uses flow layout to display images. This typesetting method is especially suitable for pages that display a large number of images, and Macy.js The plugin is only 4KB in size.
Macy.js plug-in configuration is also more convenient. Users can customize the spacing, number of columns and different screen resolutions according to their own needs.
Project address: http://macyjs.com/
<script src="macy.js"></script>
<div id="macy-container"> <div > <img src="/static/imghw/default1.png" data-src="aa.jpg" class="lazy" / alt="Ultra-lightweight web page flow layout JS plug-in Macy.js" > </div> </div>
<script> var masonry = new Macy({ container: '#macy-container', // 图像列表容器id trueOrder: false, waitForImages: false, useOwnImageLoader: false, debug: true, //设计间距 margin: { x: 10, y: 10 }, //设置列数 columns: 6, //定义不同分辨率(1200,940,520,400这些是分辨率) breakAt: { 1200: { columns: 5, margin: { x: 23, y: 4 } }, 940: { margin: { y: 23 } }, 520: { columns: 3, margin: 3, }, 400: { columns: 2 } } }); </script>