Jquery实现瀑布流布局插件
瀑布流，又称瀑布流式布局。
是目前比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局
是目前比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局
功能使用也简单，引入插件之后，页面写几行代码就可以实现了
效果如下
主要代码如下：
主要代码如下：
<div id="main"> <ul id="content"> <li class="h30 post"></li> <li class="h50 post"></li> <li class="h25 post"></li> <li class="h30 post"></li> <li class="h50 post"></li> <li class="h80 post"></li> <li class="h100 post"></li> <li class="h45 post"></li> <li class="h30 post"></li> <li class="h50 post"></li> <li class="h30 post"></li> <li class="h50 post"></li> <li class="h30 post"></li> <li class="h50 post"></li> <li class="h25 post"></li> <li class="h30 post"></li> <li class="h50 post"></li> <li class="h80 post"></li> <li class="h100 post"></li> <li class="h45 post"></li> <li class="h30 post"></li> <li class="h50 post"></li> <li class="h30 post"></li> <li class="h50 post"></li> <li class="h30 post"></li> <li class="h50 post"></li> <li class="h25 post"></li> <li class="h30 post"></li> <li class="h50 post"></li> <li class="h80 post"></li> <li class="h100 post"></li> <li class="h45 post"></li> <li class="h30 post"></li> <li class="h50 post"></li> <li class="h30 post"></li> <li class="h50 post"></li> </ul> </div> <script type="text/javascript" src="http://www.jq-school.com/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/jquery.masonry.min.js"></script> <script type="text/javascript"> $(function(){ $('#content').masonry({ itemSelector : '.post', columnWidth : 70 }); }); </script> 本文由用户 dengjianbin 自行上传分享，仅供网友学习交流。所有权归原作者，若您的权利被侵害，请联系管理员。
转载本站原创文章，请注明出处，并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台，欢迎各类分享！