注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jquery响应式CSS瀑布流插件Salvattore

UI fishcity 2666浏览

jquery响应式CSS瀑布流插件Salvattore

Salvattore 是一个不可不知的JS脚本库,它可帮您轻松的把html元素按你想要的列数排列好,形成瀑布流效果。有点像jQuery Masonry一样。

特点:

无需求:Salvattore是一个独立的JS库,只需引入到html文档中即可马上工作。

非常轻量级:压缩后只有2.5KB

CSS定义:列数和样式风格都可让用户自定义

支持媒体查询:相同的参数通过媒体查询在不同的设备上得到更好的效果

浏览器支持:现代浏览器和IE9+

使用方法:

引入核心库文件和样式

 <link rel="stylesheet" href="salvattore.css">
 <!-- salvattore.min.js必须在body的底部引入 -->
 <script src="../dist/salvattore.min.js"></script>

Salvattore根据你定义的列数来分配网格项(items),每一个网格项都会一个接一个的放置在列上。那么我们需要做的是就是在网格元素上添加data-columns属性。

<div id="grid" data-columns>
	<div>Item #1</div>
	<div>Item #2</div>
	<div>Item #3</div>
	…
	<div>Item #20</div>
</div>

写入CSS样式,具体代码如下

#grid[data-columns]::before {
	content: '3 .column.size-1of3';
}

/* These are the classes that are going to be applied: */
.column { float: left; }
.size-1of3 { width: 33.333%; }

完成以上工作,Salvattore已经开始工作,最终得到的html代码如下

<div id="grid" data-columns>
	<div class="column size-1of3">
		<div>Item #1</div>
		<div>Item #4</div>
		…
	</div>
	<div class="column size-1of3">
		<div>Item #2</div>
		<div>Item #5</div>
		…
	</div>
	<div class="column size-1of3">
		<div>Item #3</div>
		<div>Item #6</div>
		…
	</div>
</div>

如果你没有定义任何CSS样式,那么.column将会采用默认设置。

媒体查询

把页面设成响应式比你想像的还容易,你只需在媒体中(@media)写入你的Salvattore样式设置就可以了

@media screen and (max-width: 480px){
	#grid[data-columns]::before {
		content: '1 .column.size-1of1';
	}
}

@media screen and (min-width: 481px) and (max-width: 768px) {
	#grid[data-columns]::before {
		content: '2 .column.size-1of2';
	}
}
@media screen and (min-width: 769px) {
	#grid[data-columns]::before {
		content: '3 .column.size-1of3';
	}
}

/* Again, you’re free to use and define the classes: */
.column { float: left; }
.size-1of1 { width: 100%; }
.size-1of2 { width: 50%; }
.size-1of3 { width: 33.333%; }

至此,你的页面已经是响应式的了,你可以改变你的视窗来查看效果。

动态内容

Salvattore有两个函数append_elements和prepend_elements让你在元素前和元素后添加内容,两个函数的参数都是grid和elements ,下面是代码

var grid = document.querySelector('#grid');
var item = document.createElement('article');

salvattore['append_elements'](grid, [item])
item.outerHTML = 'I’ve been appended!';

转载请注明:jQ酷 » jquery响应式CSS瀑布流插件Salvattore

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。