html+js 瀑布流布局

最新推荐文章于 2024-07-25 15:56:00 发布
最新推荐文章于 2024-07-25 15:56:00 发布
阅读量851 收藏 2
点赞数 2

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');
  }
}
注： 在对加载数据循环之后，需要对加入后的元素，同样需要进行瀑布流布局。
michaelmiss
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html+css+js瀑布流布局
su_yun的博客
06-21 192
流式布局实现
html 瀑布流展示
12-10
适用于html 商品页 两列，瀑布流展示 ，用于在商品图片大小不一时，还能有一个看起来舒适的布局。适用于html 商品页 两列，瀑布流展示 ，用于在商品图片大小不一时，还能有一个看起来舒适的布局。
瀑布流
dada_master的博客
07-28 405
JS瀑布流 js实现瀑布流布局 window.onload=function(){ waterfall('main','box'); } function waterfall(parent,box) { // 获取mian下的所有box元素 var oParent=document.getElementById(parent); var oBoxs=getByClass
HTML+CSS实现瀑布流
最新发布
qq_38650613的博客
07-25 150
HTML+CSS实现瀑布流页面布局
html中的瀑布流是什么
weixin_34290390的博客
05-07 3337
html中的瀑布流是什么 一、总结 1、瀑布流： 从左往右排列,哪一列现在的总高度最小,就优先排序把item(单元格)放在这一列.这样排完所有的单元格后,可以保证每一列的总高度都相差不大 2、看效果图： 3、瀑布流使用前置性条件：瀑布流很多有特定的使用前置性条件，不要乱用   二、瀑布流应用场景 首先，我们得明确一点，瀑布流肯定是有好处的，不然pinterest不可能那么火，...
瀑布流布局 (HTML、JavaScript)
weixin_45229447的博客
11-02 429
纵向双列瀑布流布局
HTML/CSS/JS实现瀑布流
weixin_43811753的博客
08-04 162
文章目录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
html+css+js瀑布流效果
06-06
然而，由于浏览器兼容性问题，我们通常会结合JavaScript来实现更兼容的瀑布流布局。 JavaScript是前端开发中的动态脚本语言，用于实现网页的交互性和动态功能。在瀑布流布局中，JavaScript通常用于计算元素的位置和...
PHP+jQuery瀑布流布局代码.7z
03-21
瀑布流布局，也被称为Masonry布局，是一种网页布局方式，常用于图片展示或者商品陈列，其特点是每一列的元素不一定是等高的，而是根据内容自适应高度，形成一种错落有致的效果。在这个"PHP+jQuery瀑布流布局代码"中...
HTML5+CSS3+JS小实例：自适应瀑布流布局
01-24
在这个"HTML5+CSS3+JS小实例：自适应瀑布流布局"中，我们将探讨如何使用这些技术实现一个灵活且适应不同屏幕尺寸的瀑布流布局。 首先，HTML5作为网页的结构语言，它引入了许多新元素来更好地表达网页内容，如`...
jQuery+HTML5美女瀑布流布局实现方法
11-24
这是一款JavaScript与HTML5实现美女瀑布流布局，本方法是把图片的路径写在了JS的数组里，不过重点好像不是在这里，而是在图片如何自动排列的问题，你可以运行本实例后，点击“加载瀑布流布局”按钮，即可看到图片的...
瀑布流html
12-13
瀑布流domo，基于jq的响应式瀑布流。完美domo。 加快响应速度
瀑布流布局Demo.html
09-10
一个基于vue的瀑布流布局小demo，思路是通过js给容器内的每一个内容块定位，从而实现优先补短的瀑布流布局。
HTML中的瀑布流布局
2203_75920270的博客
01-20 1015
瀑布流布局是当下比较流行的一种网站页面布局，在网络上随处可见，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动不断加载数据块并附加到当前尾部。比如：某书页面。
HTML之瀑布流布局
weixin_45846139的博客
06-14 1384
什么是瀑布流布局 瀑布流，又称瀑布流式布局。 是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。 瀑布流布局的特点 琳琅满目：整版以图片为主，大小不一的图片按照一定的规律排列。 唯美：图片的风格以唯美的图片为主。 操作简单：在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前。 瀑布流对于图片的展现，是高效而具有吸引力的，用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式
js瀑布流布局
薛文诚的博客
09-26 296
瀑布流很常见，但是我也是最近才开始研究，一直以为它很难，但是搞清原理就变得很简单！ 原理就是: 绝对定位+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 492
瀑布流布局的特点：各元素等宽不等高 大概效果如下： 分析 通过定位布局 先确定在浏览器显示区域内，一行能放多少列图片 获取页面的宽度pageWidth（做兼容） 图片盒子宽度itemWidth 间隙gap 列数：column=pageWidth/(itemWidth+gap) 先排第一行 当盒子索引小于列数column的时候，就排在第一行 确定在第一行后，动态设置left的值,top值为0 left=i*(itemWidth+gap) 第一行排好之后，因为第二行需要考虑top值，将
html瀑布流
123456
04-06 335
&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 850
瀑布流 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
JavaScript实现瀑布流布局详解
"JavaScript瀑布流布局的实现代码和原理介绍" 瀑布流布局，又称为Masonry布局，是一种常用于展示图像或内容的网页设计模式，它的特点在于将内容元素（如图片）按照一定规则排列，形成类似瀑布下落的效果。在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值