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/
##Plug-in features·Lightweight , only 4KB in size, the min version is only 2KB! · The number of layout columns can be customized; · Pure JS, no need to rely on jQuery library. Usage Tutorial Step 1: Introduce JS files at the footer of the page (cannot be placed in the Header)<script src="macy.js"></script>Step 2: HTML structure
<div id="macy-container"> <div > <img src="aa.jpg" / alt="Ultra-lightweight web page flow layout JS plug-in Macy.js" > </div> </div>Step 3: Configure JS
<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>How do you like this plug-in? Get it quickly!