两种瀑布流实现

最新推荐文章于 2023-02-15 19:51:46 发布
最新推荐文章于 2023-02-15 19:51:46 发布
阅读量113 收藏
点赞数
分类专栏： jquery 文章标签： jquery ViewUI

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>

iteye_6992
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
两列瀑布流_CSS实现瀑布流布局方式(2)
weixin_36176386的博客
01-15 1746
之前，我们用的是一个相对来说比较复杂的方式来实现一个瀑布流式布局。回顾上一章:CSS实现瀑布流布局方式(1)代码搬运工--D，公众号：ElegantCodeCSS实现瀑布流式布局方式(1)利用Html设置两列布局，主要用到的有弹性布局的方式，今天小编将为大家介绍另外一个简单的方式实现瀑布流式布局。同样，我们先新建文件,用简单的代码进行演示：<body><div...
html简单弹窗代码_真的！！！两行css代码实现瀑布流，html,css最简单的瀑布流实现方式且没有缺点！...
weixin_39606396的博客
11-30 162
两行css如下:<style scoped> .waterfall-container { /*分几列*/ column-count: 2; } .waterfall-item { /*不留白，不知道什么意思可以取消这个样式试试*/ break-inside: avoid; } </style> /*列间距，可有可无，默认...
css 一行显示_IT学堂：纯CSS的瀑布流布局方法总结
weixin_39900023的博客
11-29 381
瀑布流布局出来好多年了，刚出来时，一般都采用js来实现，涌现了很多比较好的js插件，例如：masonry.js、gridify.js等等。这里就不再详说如何使用了，网上都能找到。今天讨论的是纯CSS实现瀑布流布局。一、多个列表并列的瀑布流布局法：这种布局方法非常简单，就是将多个列表横向排列，每个列表拥有的项都差不多。图片宽度固定，高度自动撑起来。html：css:.wrap{display:fle...
封装瀑布流布局的实现【两列】
weixin_47093559的博客
02-22 268
整体思路 将数据分为左右两列； 记录左右两边的高度，将数组的每一项插入到高度低的那列； 将处理好的数据和左右两边的高度返回(左右两列高度必须保存好，上拉加载更多等其他操作也需要)。 封装好的方法 根据需要传参 直接调用就可 /* feedLists ----------- 处理好的数据，初始值为[[],[]]; moduleHeights ------- 左右两边模块的高度,初始值为[0,0]; serverData --------- 要处理的数据; */ const dealD
瀑布流的两种实现方式
Lobove_code的博客
10-30 561
瀑布流的两种实现方式 1.采用绝对定位的方式 也可以用浮动 瀑布流—js(查看代码) 2.纯Css的方式 瀑布流—css(查看代码)
小程序简单两栏瀑布流效果的实现
11-29
瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次放入到...
蘑菇街瀑布流实现
11-01
瀑布流布局，也被称为无限滚动或Infinite Scroll，是一种在网页和移动应用中常见的内容展示方式，尤其在电商、社交和图片分享类应用中广泛使用。这种布局方式模仿了真实的瀑布，使得内容能够以多列的形式自上而下...
原生JavaScript实现瀑布流布局
10-23
瀑布流布局，也被称为Masonry布局，是一种网页布局方式，常用于展示图片或者商品列表，使得每一列的顶部对齐，形成类似瀑布的效果。在本示例中，我们看到它是如何使用原生JavaScript来实现的。 首先，我们需要理解...
jquery实现瀑布流效果分享
10-26
瀑布流布局，又称Masonry布局，是一种常见的网页元素排列方式，尤其在展示图片或商品时非常流行。这种布局方式的特点是让元素根据浏览器窗口大小自动调整排列，形成类似瀑布的效果，即每一列的高度各不相同，但整体...
微信小程序点击预览图片
明知山
11-29 432
getpreview(e) { //img_url是点击当前的图片 //item 是图片数组 var img_url = e.currentTarget.dataset.img_url var item = e.currentTarget.dataset.item var img_list = [] for (let i in item) { ...
基于CSS多列实现瀑布流
小白知浅的博客
01-13 155
基于CSS多列实现瀑布流 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;瀑布流&lt;/title&gt; &lt;link rel="style
高性能的两列瀑布流
weixin_45424044的博客
02-15 905
1.两列的瀑布流，需要两列容器，容器需要用定位来实现，这样才能保证瀑布流的成型 2.将数据源存储在一个变量中，给里面的每条数据添加高度（height必填）、唯一标识（id必填) 和其他需要的字段 3.定义左右容器的变量，各自存储左右所需要的数据 4.将源数据通过遍历的形式，对比两侧高度差，来决定此条数据存储到哪个变量中
CSS总结——瀑布流布局
m0_67401660的博客
08-01 2631
瀑布流布局是一种新型的布局方式，可以将大小不一的图片完整的显示在页面上，并且在杂乱的布局中保持着一定的美感，今天学习了一下如何使用瀑布流布局，总结了有以下三种方式。（瀑布流还可以使用grid布局实现，还没有学习过这种方式）瀑布流的实现方法可以用纯CSS，也可以用JS实现，如何选取决于需求,这几种方法各有优略，如何选取取决于需求。以下案例均采用如下的html代码。...
3种方式实现瀑布流布局
热门推荐
杏子
08-06 6万+
今天逛闲鱼的时候观察到每一行的高度不是相同的，经了解才知道原来这是一种瀑布流布局，感觉挺有意思，于是决定研究一下，在网上也找了一些方案，实现瀑布流大概有3种方式。
纯css实现瀑布流（multi-column和flex布局）
ZJW222的博客
09-04 6220
瀑布流的布局自我感觉还是很吸引人的，最近又看到实现瀑布流这个做法，在这里记录下，特别的，感觉flex布局实现瀑布流还是有点懵的样子，不过现在就可以明白它的原理了 1.multi-column多列布局实现瀑布流 先简单的讲下multi-column相关的部分属性 column-count设置列数 column-gap设置列与列之间的间距 column-width设置每列的宽度 还要结合在子...
瀑布流布局的三种实现方式
xiunen
03-11 1486
随着读图时代的到来，页面使用瀑布流布局越来越流行。那么，瀑布流有那些实现方式呢？ 1 绝对定位，计算每个块的位置 2 固定列数，float布局 3 多列css
实现图片瀑布流布局（两列）
weixin_30587025的博客
12-03 1464
样式： <style> ul{ width: 100%; margin: 0 auto; } ul li{ width: 50%; } ul li div{ width: 100%; margin-bottom: 10px } img{ width: 10...
小程序设置列表瀑布流（两列）
羽筠的博客
05-05 3786
小程序设置列表瀑布流，当不知道列表数据中的图片元素在等宽时的高度数据时，不太好设置左、右边数据，所以通过：先将当前获取到的列表数据中的图片显示在页面中，用bindload='pubuImgLoad'事件来获取设置所有图片在等宽时的高度，再将计算出的高度数据存储在当前列表项JSON中，再根据左、右边容器的高度，逐个将列表项添加在左、右边容器中的数组中 app.js中加处理方法： //处理设...
JS解析动态生成移动端瀑布流(两列)
elephant230的博客
05-05 1768
世界这么大,只有四天假. 今天拐回头再看假期前写的两列瀑布流,发现了一个严重的问题. 虽然我用了window.onload方法,但是具体问题还是要具体对待. window.onload适用于结构中已经存在的DOM元素,针对于元素中已有的需要加载异步数据(img中的src,或script中的src、css文件)时起作用,但对于我这次动态生成的img元素而形成的移动端瀑布流,反倒不起作用了. ...
jquery实现瀑布流效果
最新发布
05-24
实现瀑布流效果的方法一般有两种：基于CSS3的实现和基于jQuery的实现。...注意：这只是一种基础的瀑布流实现方法，实际应用中还需要考虑一些细节问题，比如图片加载完成后再计算高度、窗口大小变化时重新排列等问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值