`
keimon
  • 浏览: 73183 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

两种瀑布流实现

jquery 
阅读更多

1：使用插件  masonry

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery.masonry.js"></script>
<style>
*{
  margin:0;
  padding:0;
}
body{
  text-align:center;
}
#container{
  width:800px;
  border:1px solid #999;
  margin-left:auto;
  margin-right:auto;
  padding-left:10px;
}
.box{
  width:175px;
  border:1px solid #ddd;
  padding:5px;
  margin:5px;
  text-align:left;
}
</style>
</head>

<body>
<div id="container" class="clearfix">

  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
  </div>

  <div class="box">
    <p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
    <p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
  </div>


  <div class="box">
    <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
  </div>

  <div class="box">
    <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula  </p>
  </div>

  <div class="box">
    <h2>Sit amet mi ullamcorper vehicula</h2>
          <p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue.  Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
  </div>

  <div class="box">
    <p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
  </div>

  <div class="box">
    <p>Sit amet mi ullamcorper vehicula</p>
  </div>

  <div class="box">
    <p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
  </div>

  <div class="box">
    <p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. </p>
    <p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
  </div>

  <div class="box">
    <p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. </p>
  </div>

  <div class="box">
    <p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
  </div>

  <div class="box">
    <p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
    <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula  </p>
  </div>

  <div class="box">
    <p>Sit amet mi ullamcorper vehicula</p>
  </div>

  <div class="box">
    <p>Morbi purus libero</p>
  </div>

  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. </p>
  </div>

  <div class="box">
    <p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
  </div>

  <div class="box">
    <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula  </p>
  </div>

  <div class="box">
    <p>Sit amet mi ullamcorper vehicula</p>
  </div>

  <div class="box">
    <h2>Morbi purus libero</h2>
  </div>


  <div class="box">
    <p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
    <p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
  </div>

  <div class="box">
    <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
  </div>

  <div class="box">
    <p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, </p>
  </div>


  <div class="box">
    <p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>

<script>
/*
*  使用masonry插件；
*  http://masonry.desandro.com/
*  *******made by keimon**********
*  *********2013-01-28*************
*/
  $(function(){
   
    $('#container').masonry({
      itemSelector: '.box'
    });

  });
</script>
</body>
</html>

 

=================================================================================

2：jquery实现瀑布流

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>
*{
  margin:0;
  padding:0;
}
body{
  text-align:center;
}
#container{
  width:800px;
  margin-left:auto;
  margin-right:auto;
  position:relative;
}
.box{
  width:178px;
  border:1px solid #ddd;
  margin:5px;
  padding:5px;
  text-align:left;
  float:left;
  position:relative;
  display:inline;
}
</style>
</head>

<body>
<div id="container" class="clearfix">

  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
  </div>

  <div class="box">
    <p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
    <p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
  </div>


  <div class="box">
    <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
  </div>

  <div class="box">
    <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula  </p>
  </div>

  <div class="box">
    <h2>Sit amet mi ullamcorper vehicula</h2>
          <p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue.  Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
  </div>

  <div class="box">
    <p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
  </div>

  <div class="box">
    <p>Sit amet mi ullamcorper vehicula</p>
  </div>

  <div class="box">
    <p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
  </div>

  <div class="box">
    <p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. </p>
    <p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
  </div>

  <div class="box">
    <p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. </p>
  </div>

  <div class="box">
    <p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
  </div>

  <div class="box">
    <p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
    <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula  </p>
  </div>

  <div class="box">
    <p>Sit amet mi ullamcorper vehicula</p>
  </div>

  <div class="box">
    <p>Morbi purus libero</p>
  </div>

  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. </p>
  </div>

  <div class="box">
    <p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
  </div>

  <div class="box">
    <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula  </p>
  </div>

  <div class="box">
    <p>Sit amet mi ullamcorper vehicula</p>
  </div>

  <div class="box">
    <h2>Morbi purus libero</h2>
  </div>


  <div class="box">
    <p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
    <p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
  </div>

  <div class="box">
    <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
  </div>

  <div class="box">
    <p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, </p>
  </div>


  <div class="box">
    <p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
  </div>
  <div style="clear:left"></div>
</div> 

<script>
/*
*  jquery瀑布流；
*  IE8，FF,opera中测试可用，其他浏览器未测
*  *******made by keimon**********
*  *********2013-01-28*************
*/
//javascript 获得class值相同的元素；在jquery中可省去；
function getByClass(tagName,className){
  var t = document.getElementsByTagName(tagName);
  var arr=[];
  for(var i=0; i<t.length; i++){
    if(t[i].className==className){
    arr.push(t[i]);
 }
  }
  return arr;
}

//实现瀑布流；
//第一行的position值未设置，以后的position值设为‘absolute’，
//后面的元素根据每一个的高度判断添加到那一列；
function test(n){
  var d = getByClass('div','box'); //可以直接用jquery的$('.box')来代替；
  var h = []; // 用于存储每一列的高度；
  for(var i=0; i<n; i++){
     d[i].style.position='';
  h[i]=$(d[i]).outerHeight(true); //若用原生js，则用offsetHeight，但还需要加上margin值；
  }
 
  var w = $(d[0]).outerWidth(true); //用第一个div的宽度代表所有div的宽度
  for(var j=n; j<d.length; j++){
     var minH = Math.min.apply({},h); //用于获得数据h中的最小值；
 
     for(var k in h){  //用于获得数据h中最小值，所对应的标号；
        if(h[k]==minH){
       var index = k;
     }
     }

  h[index] += $(d[j]).outerHeight(true);  //每一列新增div后，获得的新总高度；
     var styles = {
     position:'absolute',
  left:index*w,
  top:minH
  }
  $(d[j]).css(styles);
  }
}
test(4); //4代码有4列；
</script>
</body>
</html>

0
顶
0
踩
分享到：
| 解析json数据
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript瀑布流实现的两种方式：固定列数的浮动布局与绝对定位自适应宽度 (1).docx

    javascript瀑布流实现的两种方式：固定列数的浮动布局与绝对定位自适应宽度 (1).docx

    小程序简单两栏瀑布流效果的实现

    瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次放入到...

    iOS瀑布流的简单实现(Swift)

    主要介绍了iOS瀑布流的简单实现，说到瀑布流, 或许大家都不陌生, 瀑布流的实现也有很多种! 本文使用两种方法介绍，有兴趣的可以了解一下。

    瀑布流布局的两种实现方式：传统多列浮动和绝对定位布局

    瀑布流布局想必大家对它并不陌生吧，在一些网站上都会有这种效果的出现，下面为大家介绍下使用两种方式实现传统多列浮动和绝对定位布局，具体的实现代码如下，感兴趣的朋友可以参考下，希望对大家有所帮助

    vue.js组件vue-waterfall-easy实现瀑布流效果

    想必大家应该很多都已经习惯了jquery的DOM操作，jquery的瀑布流实现起来也很容易。 但是，随着时代的发展，随着时代的进步….. 算了算了，扯远了，既然能找到这儿来，肯定是在vue.js上已经有一定的基础了，咱们废话...

    微信小程序通过js实现瀑布流布局详解

    瀑布流的两种做法： css: 在父元素上使用column-count: 2也可以做到两列排版。但column-count: 2是左右两列排版，如果碰巧出现左边累计高度过多大于右边累计高度的话，右边会出现大片空白区域。点击前往 js(推荐):...

    PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】

    瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内...

    PullZoomView适配瀑布流

    又一个PullZoom效果的库，提供了ListView和ScrollView的两种实现，同时可可以设置一些属性，比如是否显示header，是否启用Parallax 等

    HTML5 CSS3 照片墙瀑布流布局特效.rar

    一款基于HTML5 CSS3的瀑布流布局特效，相信瀑布流您已经很熟悉了，这两年流行的一种网页布局效果，它可以横向和垂直布局，本款代码貌似兼顾了两者，看上去更像是一个照片墙特效，点击任意一张小图片，会显示该图片的...

    Pinterest:类似pinterest,美丽说,蘑菇街的瀑布流

    Pinterest类似pinterest,美丽说,蘑菇街的瀑布流一.前言：找遍github与eoe论坛,...提供两种下拉刷新方式(普通下拉及Android的SwipeRefreshLayout)3.到底自动加载更多三.软件截图：四.意见反馈：微博：QQ群：241374213

    jquery实现简单的瀑布流布局

    瀑布流布局有两种，一种是固定列，一种是非固定列。本文主要记述第一种的实现。需要的朋友可以参考借鉴

    详解javascript实现瀑布流列式布局

    主要介绍了javascript实现瀑布流的两种布局方式，一是绝对式布局、二是列式布局，详细介绍了这两种布局方式的原理，本文重点介绍列式布局，感兴趣的小伙伴们可以参考一下

    详解javascript实现瀑布流绝对式布局

    主要介绍了javascript实现瀑布流的两种布局方式，一是绝对式布局、二是列式布局，详细介绍了这两种布局方式的原理，感兴趣的小伙伴们可以参考一下

    Android RecyclerView加载两种布局的方法

    当RecyclerView有下拉刷新时，有时候设计图上，体现出来的列表有头部布局，这可以通过Adapter实现加载多套布局就可以，这里以加载两种布局为例说明。 先看看Adapter的代码： import android.annotation....

    Android RecyclerView 上拉加载更多及下拉刷新功能的实现方法

    使用RecyclerView实现上拉加载更多和下拉刷新的功能我自己有两种方式： 1.使用系统自带的Android.support.v4.widget.SwipeRefreshLayout这个控价来实现。 2.自定义的里面带有RecyleView的控件。 使用RecycleView很...

    婚纱摄影欧美时尚版 dzX3商业版980px宽.rar

    功能简介 与 特色介绍 0、所有模板均使用DIV+CSS技术，利于SEO优化。部分模板使用了最新的 HTML5+CSS3技术，以实现3D立体、透明等酷炫特效。...16、【帖子图片瀑布流】帖子列表页支持列表样式 和 瀑布流 两种样式。

    基于uniapp开发的仿小米有品的微信小程序项目源码.zip

    商品列表排序+筛选，卡片、瀑布两种展示样式可切换。 商品详情自定义状态栏，返回按钮右侧增加菜单。如果商品有视频则轮播图处显示播放按钮，显示视频时长（由于接口未提供视频时长，所以实现比较复杂。实际中不推荐...

    Android 中RecyclerView通用适配器的实现

    这个下面会以一种简单的方式顺带解决，肯定为大家省心)，而且可以代码动态切换这两种布局方式以及瀑布流布局。相关切换方式网上有很多，大家自行搜索，我就不贴连接了。 相信大家在之前使用listview时肯定一直很...

Magicbox
Global site tag (gtag.js) - Google Analytics