瀑布流

最新推荐文章于 2024-01-27 11:39:47 发布

weixin_34127717

最新推荐文章于 2024-01-27 11:39:47 发布

阅读量97

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/sundaren/blog/711365

版权

2019独角兽企业重金招聘Python工程师标准>>>

大家好，今天给大家分享的是一款简单实用的瀑布流插件，步骤很简单，轻松搞定瀑布流！Let's go!!!

简单实用的jQuery响应式网格瀑布流布局插件这个就是我今天选讲的一个插件

// css样式代码（可以部分设定更改）

.article {display: block;margin-right: 5px;margin-bottom: 5px; background: white;position: relative;}
.article > img {display: block;width: 100%;}
.wall {display: block;position: relative;padding: 10px;}
.wall-column {display: block;position: relative;width: 25%;float: left;box-sizing: border-box;}

//body代码：

	<div class="wall">
		  <div class="article" >
		    	<img class="backimg" src="url1" />
		  </div>
		  <div class="article" >
		    	<img class="backimg" src="url2" />
		  </div>
		  <div class="article" >
		    	<img class="backimg" src="url3" />
		  </div>
		  <div class="article" >
		       <img class="backimg"  src="url4" />
		  </div>
	</div>

//瀑布流JQ代码和瀑布流插件库：
  注意jaliswall.js文件的位置

<script type="text/javascript" src="jaliswall.js"></script>
	$(function(){
		$('.wall').jaliswall({ item: '.article' });
	});

希望对你有用~

转载于:https://my.oschina.net/sundaren/blog/711365