jquery实现瀑布流

最新推荐文章于 2024-11-05 15:26:40 发布

chentian2087

最新推荐文章于 2024-11-05 15:26:40 发布

阅读量116

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/ducaiwei/blog/187142

版权

最近在做我们产品的官网，需要开发一个照片墙展示界面。到网上搜了一下模版，决定用瀑布流的方式展示照片。于是去搜索瀑布流的demo，有很多很好的例子，其中堆糖的瀑布流感觉比较完美，但是太复杂了。继续搜索，最后找到jquery.infinitescroll.js+jquery.masonry.js的例子，觉得简单明了，自己拿来改了一下就可以运行了。

jquery.masonry.js主要是实现瀑布流的布局。查找masonry文档就能知道是级联网格布局的插件包，masonry的使用其实很简单。看一下代码

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.js"></script>
<title>monsry使用实例</title>
<style>
 .item{width:25%;border:1px solid red;}
 .item .w2{width:30%;border:1px solid green;}
</style>
<script type="text/javascript">
function item_masonry(){ 
 $('#container').load(function(){ 
  $('#container').masonry({ 
   //附加选择器,指定那些元素包裹的元素会重新排列
   itemSelector: '.item',
   //一列网格的宽度,默认是第一个元素浮动外的宽度
   columnWidth:100,
   //列的间隙宽度 单位px
   gutterWidth:15,
   //禁用测量每个浮动元素的宽度 如果浮动元素具有相同的宽度则设为true  默认是false
   sigleMode:flase,
   // 绑定一个 Masonry 访问 用来 窗口 resize时布局平滑流动.  
     // 默认：true       
   resizeable:true,
   //布局重排动画  默认false
   animate:true,
   // 一对动画选项，具体参数可以参考jquery .animate()中的options选项 
   animationOptions: {},  
   //  附加选择器元素，用来尾部追加内容。  
     // 在集成infinitescroll插件的情况下使用。
      appendedContent: $('.new_content'),   
   // 默认情况下，Masonry 将使用以前Masonry使用过的参数选项,所以你只需要输入一次选项  
     // 默认：true  
   saveOptions: true
  });
  }); 
  
 $('#container').masonry({ 
  itemSelector: '.item',
  columnWidth:100,
  gutterWidth:15        
 }); 
}
$(function(){
 item_masonry();
});
</script>
</head>
<body>
 <div id="container">
     <div class="item">哈哈</div>
        <div class="item w2">呵呵</div>
        <div class="item">嘻嘻</div>
    </div>
</body>
</html>
</html>

转载于:https://my.oschina.net/ducaiwei/blog/187142