js瀑布流

最新推荐文章于 2024-01-20 15:45:35 发布
最新推荐文章于 2024-01-20 15:45:35 发布
阅读量307 收藏
点赞数 1

HTML瀑布流布局

[html]  view plain  copy
  1. <span style="font-size:10px;"><!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  5. <script type="text/javascript" src="js/waterfall.js"/></script>  
  6.   
  7. <title></title>  
  8. <style type="text/css">  
  9.     *{padding: 0;margin:0;}  
  10.     #main{  
  11.         position: relative;  
  12.     }  
  13.     .box{  
  14.         padding: 15px 0 0 15px;  
  15.         float:left;  
  16.     }  
  17.     .pin{  
  18.         padding: 10px;  
  19.         border:1px solid #ccc;  
  20.         box-shadow: 0 0 6px #ccc;  
  21.         border-radius: 5px;  
  22.     }  
  23.     .box img{  
  24.         width:162px;  
  25.         height:auto;  
  26.     }  
  27. </style>  
  28. </head>  
  29. <body>  
  30. <div id="main">  
  31.     <div class="box">  
  32.         <div class="pin">  
  33.             <img src="./images/1.jpg"/>  
  34.         </div>  
  35.     </div>  
  36.     <div class="box">  
  37.         <div class="pin">  
  38.             <img src="./images/2.jpg"/>  
  39.         </div>  
  40.     </div>  
  41.     <div class="box">  
  42.         <div class="pin">  
  43.             <img src="./images/3.jpg"/>  
  44.         </div>  
  45.     </div>  
  46.     <div class="box">  
  47.         <div class="pin">  
  48.             <img src="./images/4.jpg"/>  
  49.         </div>  
  50.     </div>  
  51.     <div class="box">  
  52.         <div class="pin">  
  53.             <img src="./images/5.jpg"/>  
  54.         </div>  
  55.     </div>  
  56.     <div class="box">  
  57.         <div class="pin">  
  58.             <img src="./images/6.jpg"/>  
  59.         </div>  
  60.     </div>  
  61.     <div class="box">  
  62.         <div class="pin">  
  63.             <img src="./images/7.jpg"/>  
  64.         </div>  
  65.     </div>  
  66.   <div class="box">  
  67.         <div class="pin">  
  68.             <img src="./images/8.jpg"/>  
  69.         </div>  
  70.     </div>  
  71.   <div class="box">  
  72.       <div class="pin">  
  73.             <img src="./images/9.jpg"/>  
  74.         </div>  
  75.     </div>  
  76.   <div class="box">  
  77.   <div class="pin">  
  78.             <img src="./images/10.jpg"/>  
  79.         </div>  
  80.     </div>  
  81.   <div class="box">  
  82.   <div class="pin">  
  83.             <img src="./images/11.jpg"/>  
  84.         </div>  
  85.     </div>  
  86.   <div class="box">  
  87.   <div class="pin">  
  88.             <img src="./images/12.jpg"/>  
  89.         </div>  
  90.     </div>  
  91.   <div class="box">  
  92.   <div class="pin">  
  93.             <img src="./images/13.jpg"/>  
  94.         </div>  
  95.     </div>  
  96.   <div class="box">  
  97.   <div class="pin">  
  98.             <img src="./images/14.jpg"/>  
  99.         </div>  
  100.     </div>  
  101.   <div class="box">  
  102.   <div class="pin">  
  103.             <img src="./images/15.jpg"/>  
  104.         </div>  
  105.     </div>  
  106.   <div class="box">  
  107.   <div class="pin">  
  108.             <img src="./images/16.jpg"/>  
  109.         </div>  
  110.     </div>  
  111.   <div class="box">  
  112.   <div class="pin">  
  113.             <img src="./images/17.jpg"/>  
  114.         </div>  
  115.     </div>  
  116.   <div class="box">  
  117.   <div class="pin">  
  118.             <img src="./images/18.jpg"/>  
  119.         </div>  
  120.     </div>  
  121.   <div class="box">  
  122.   <div class="pin">  
  123.             <img src="./images/19.jpg"/>  
  124.         </div>  
  125.     </div>  
  126.   <div class="box">  
  127.   <div class="pin">  
  128.             <img src="./images/20.jpg"/>  
  129.         </div>  
  130.     </div>  
  131.   <div class="box">  
  132.   <div class="pin">  
  133.             <img src="./images/21.jpg"/>  
  134.         </div>  
  135.     </div>  
  136. </div>  
  137. </body>  
  138. </html></span><span style="font-size: 24px;">  
  139. </span>  

js实现瀑布流布局

[html]  view plain  copy
  1. window.onload=function(){  
  2.   waterfall('main','box');  
  3.   
  4. }  
  5. function waterfall(parent,box) {  
  6.   // 获取mian下的所有box元素  
  7.   var oParent=document.getElementById(parent);  
  8.   var oBoxs=getByClass(oParent,box)  
  9.   console.log(oBoxs.length)  
  10.   //计算页面的列数  
  11.   var oBoxW=oBoxs[0].offsetWidth;  
  12.   var clos=Math.floor(document.documentElement.clientWidth/oBoxW);  
  13.   //设置class=main的宽  
  14.   oParent.style.cssText='width:'+oBoxW*clos+'px;margin:0 auto';  
  15.   //找到最小的高度  
  16.   var hArr=[];  
  17.   for(var i=0;i<oBoxs.length;i++){  
  18.     if(i<clos){  
  19.       //第一行开始的高度盒子添加到hArr中,并且不断添加新的高度，固定列数  
  20.       hArr.push(oBoxs[i].offsetHeight)  
  21.     }else{  
  22.       //当前oBoxs中的最小高度  
  23.       var minH=Math.min.apply(null,hArr)  
  24.       //最小高度oBoxs的索引，index的长度为一行中的图片个数  
  25.       var index=getMinhIndex(hArr,minH)  
  26.       //改变oBoxs的位置  
  27.       oBoxs[i].style.top=minH+'px';  
  28.       oBoxs[i].style.position='absolute';  
  29.       oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';  
  30.       //添加到从第一行开始的数组中  
  31.       hArr[index]+=oBoxs[i].offsetHeight;  
  32.     }  
  33.   }  
  34.   console.log(oBoxs)  
  35. }  
  36. function getByClass(oParent,clsName) {  
  37.   var oElements=oParent.children;  
  38.   var boxArr=[];  
  39.   for(var i=0;i<oElements.length;i++){  
  40.     if(oElements[i].className==clsName){  
  41.       boxArr.push(oElements[i])  
  42.     }  
  43.   }  
  44.   return boxArr;  
  45. }  
  46. function getMinhIndex(arr,minH) {  
  47.   for(var i in arr){  
  48.     if(arr[i]==minH){  
  49.       return i  
  50.     }  
  51.   }  
  52. }  

利用onscroll实现瀑布流

不断加载，实现一直处于加载的底部

滚动加载事件的条件：当到达最后一张图片的时候，也就是蓝线的距离小于黑线的距离，执行加载！

蓝线的距离：页面顶部到最后一个图片高度一半的距离

黑线的距离：top+documentElement.clientHeight(浏览器可视窗口的距离)


下面的情况不允许加载：蓝线.height>黑线.height

//滚动加载的条件
function checkScrollSlide() {
  var oParent=document.getElementById('main')
  var oBoxs=getByClass(oParent,'box')
  var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2)
  var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//兼容性
  var documentH=document.documentElement.clientHeight;//页面高度
  return (lastBoxH<scrollTop+documentH)?true:false;//到达指定高度后 返回true，触发waterfall()函数
  console.log(documentH)
}
创建window.οnscrοll=function(){},并将模拟的后台加载数据dataInt放置在页面底部 

var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
window.οnscrοll=function(){
    if(checkScrollSlide) {
    //将数据块渲染到当前页面的尾部
    for (var i = 0; i < dataInt.data.length; i++) {
      //首先找到父对象
      var oParent = document.getElementById('main');
      var oBox = document.createElement('div');
      oBox.className = 'box';
      oParent.appendChild(oBox);
      var oPin = document.createElement('div');
      oPin.className = 'pin';
      oBox.appendChild(oPin);
      var oImg = document.createElement('img');
      oImg.src = './images/' + dataInt.data[i].src;
      oPin.appendChild(oImg);
    }
      waterfall('main','box');
  }
}
注： 在对加载数据循环之后，需要对加入后的元素，同样需要进行瀑布流布局。
X__TAO
关注
HTML之瀑布流布局
weixin_45846139的博客
06-14 1414
什么是瀑布流布局 瀑布流，又称瀑布流式布局。 是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。 瀑布流布局的特点 琳琅满目：整版以图片为主，大小不一的图片按照一定的规律排列。 唯美：图片的风格以唯美的图片为主。 操作简单：在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前。 瀑布流对于图片的展现，是高效而具有吸引力的，用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式
html 瀑布流展示
12-10
适用于html 商品页 两列，瀑布流展示 ，用于在商品图片大小不一时，还能有一个看起来舒适的布局。适用于html 商品页 两列，瀑布流展示 ，用于在商品图片大小不一时，还能有一个看起来舒适的布局。
瀑布流
dada_master的博客
07-28 429
JS瀑布流 js实现瀑布流布局 window.onload=function(){ waterfall('main','box'); } function waterfall(parent,box) { // 获取mian下的所有box元素 var oParent=document.getElementById(parent); var oBoxs=getByClass
html中的瀑布流是什么
weixin_34290390的博客
05-07 3385
html中的瀑布流是什么 一、总结 1、瀑布流： 从左往右排列,哪一列现在的总高度最小,就优先排序把item(单元格)放在这一列.这样排完所有的单元格后,可以保证每一列的总高度都相差不大 2、看效果图： 3、瀑布流使用前置性条件：瀑布流很多有特定的使用前置性条件，不要乱用   二、瀑布流应用场景 首先，我们得明确一点，瀑布流肯定是有好处的，不然pinterest不可能那么火，...
瀑布流布局 (HTML、JavaScript)
weixin_45229447的博客
11-02 453
纵向双列瀑布流布局
HTML/CSS/JS实现瀑布流
weixin_43811753的博客
08-04 172
文章目录HTML代码CSS代码/index.cssJS代码/index.js HTML代码 // HTML文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> //引入CSS/JS <link href="./index.css" rel="stylesheet" /> <script
原生JS瀑布流布局，无限加载
09-01
在原生JavaScript中实现瀑布流布局，不仅可以避免对特定库或框架的依赖，还能提高页面性能，特别是在处理大量数据和动态加载时。 一、瀑布流布局的基本原理 1. 确定列数：首先，我们需要确定页面的列数。这通常基于...
JS瀑布流效果
03-20
瀑布流布局，又称Masonry...总之，JS瀑布流效果是一种利用JavaScript动态调整元素布局的技术，通过合理地分配和排列元素，实现了视觉上引人入胜的页面展示。掌握这一技术，对于提升网页设计的用户体验有着重要的作用。
深入学习js瀑布流布局
01-19
本文实例为大家分享了js瀑布流布局学习资料，供大家参考，具体内容如下 特点：等宽不等高。 实现方式：Javascript/Jquery/CSS3多栏布局。 样例网站：花瓣网–>分类 一、JS实现瀑布流 index.html:页面结构  <!...
js瀑布流demo案例
11-14
JavaScript瀑布流布局是一种常见的网页设计模式，常用于展示图片、文章等信息，使得页面内容能够自适应不同屏幕尺寸，同时保持美观的排列效果。在这个"js瀑布流demo案例"中，我们将探讨JavaScript如何实现这种布局，...
瀑布流html
12-13
瀑布流domo，基于jq的响应式瀑布流。完美domo。 加快响应速度
瀑布流布局Demo.html
09-10
一个基于vue的瀑布流布局小demo，思路是通过js给容器内的每一个内容块定位，从而实现优先补短的瀑布流布局。
HTML中的瀑布流布局
最新发布
2203_75920270的博客
01-20 1078
瀑布流布局是当下比较流行的一种网站页面布局，在网络上随处可见，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动不断加载数据块并附加到当前尾部。比如：某书页面。
js瀑布流布局
薛文诚的博客
09-26 317
瀑布流很常见，但是我也是最近才开始研究，一直以为它很难，但是搞清原理就变得很简单！ 原理就是: 绝对定位+top+left，获取left和top值是关键。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi...
JS实现瀑布流布局
Amethyst的博客
05-18 515
瀑布流布局的特点：各元素等宽不等高 大概效果如下： 分析 通过定位布局 先确定在浏览器显示区域内，一行能放多少列图片 获取页面的宽度pageWidth（做兼容） 图片盒子宽度itemWidth 间隙gap 列数：column=pageWidth/(itemWidth+gap) 先排第一行 当盒子索引小于列数column的时候，就排在第一行 确定在第一行后，动态设置left的值,top值为0 left=i*(itemWidth+gap) 第一行排好之后，因为第二行需要考虑top值，将
html瀑布流
123456
04-06 350
&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset="{CHARSET}"&gt; &lt;title&gt;&lt;/title&gt; &lt;styletype="text/css"&gt; *{ ...
HTML 瀑布流
06-17 869
瀑布流 div { margin: 0 auto; position: relative; outline: 1px solid red; } span { border: 1px solid #000; width: 230px; display: inline-block; box-sizing: border-box; marg
js实现瀑布流布局
於刚的博客
08-19 442
html代码 html> html lang="en"> head> meta charset="UTF-8"> title>瀑布流布局JStitle> link rel="stylesheet" href="index.css"> script src="../http_code.jquery.com_jquery-2.0.0.js">script> hea
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值