Jquery实现瀑布流布局插件
dengjianbin
12年前
瀑布流，又称瀑布流式布局。
是目前比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局
是目前比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局
功能使用也简单，引入插件之后，页面写几行代码就可以实现了
效果如下
主要代码如下：
主要代码如下：
<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>