響應式瀑布流插件Grid-A-Licious

時間 2019-12-02

原文原文鏈接

Grid-A-Licious是一款遵照MIT協議的響應式瀑布流插件。該插件總代碼行不超過400行，實現很巧妙，使用時也很流暢。實現原理也很簡單，根據屏幕寬度和參數中設置的列寬度以及每項之間的間隔寬度，計算出當前屏幕寬度下應該生成幾個等寬列；列生成好以後，再把每項放到等寬列中；當屏幕尺寸改變時，從新計算列表，而後再從新填充項。javascript

使用該插件也很方便。使用實例：html

<html>
	<head>
		<meta charset="utf-8" />
		<title>Grid-A-Licious</title>
	</head>
	<body>
		<div id="gridA">
			<div class="item">這是瀑布流中的一項</div>
			<div class="item">這是瀑布流中的一項</div>
			<div class="item">這是瀑布流中的一項</div>
			<div class="item">這是瀑布流中的一項</div>
			<div class="item">這是瀑布流中的一項</div>
			<div class="item">這是瀑布流中的一項</div>
			<div class="item">這是瀑布流中的一項</div>
			<div class="item">這是瀑布流中的一項</div>
			<div class="item">這是瀑布流中的一項</div>
			<div class="item">這是瀑布流中的一項</div>
			.....
		</div>
		<script type="text/javascript" src="jquery-1.11.0.js" ></script>
		<script type="text/javascript" src="jquery.grid-a-licious.min.js" ></script>
		<script type="text/javascript">
                (function(){
	               $("#gridA").gridalicious({});	
                 })()
                </script>
	</body>
</html>

插件默認參數：java

{
        selector: '.item',　　//設置瀑布流中每一項的類名
        width: 225,　　　　　　//設置等寬列的寬度，默認225，注意後面不要加"px"
        gutter: 20,　　　　　　//設置瀑布流中沒項的間隔，默認20，注意後面不要加"px"
        animate: false,      //設置生成瀑布流的動畫效果，默認無動畫效果
        animationOptions: {  //動畫效果控制選項
            speed: 200,　　　　　　　　　　
            duration: 300,　　　　　　　　
            effect: 'fadeInOnAppear',　 //目前就這一種動畫效果
            queue: true,
            complete: function () {}　　//動畫完成後的回調
        }
}

以上參數均爲可選參數。jquery

插件效果實例http://suprb.com/apps/gridalicious/git

插件源碼下載https://github.com/suprb/Grid-A-Licious　github