js瀑布流，实现图片自适应显示

最新推荐文章于 2020-05-20 14:53:51 发布
最新推荐文章于 2020-05-20 14:53:51 发布
阅读量101 收藏
点赞数
原文链接：https://my.oschina.net/renault/blog/610861
版权 
waterfall.html
/* 


*author:renault


*mail:renault9335@163.com  


*/ 
 
<!DOCTYPE html>

<html>

 <head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <title>

   实现无限加载图片

  </title>

  <script src=js/waterfall.js></script>

  <link rel="stylesheet" type="text/css" href="css/waterfall1.css">

 </head>

 <body>

  <div id="waterfall">

   <div class="box">

    <div class="box_img">

     <img src="images/1.jpg"/>

    </div>

   </div>

   <div class="box">

    <div class="box_img">

     <img src="images/6.jpg"/>

    </div>

   </div>

   <div class="box">

    <div class="box_img">

     <img src="images/2.jpg"/>

    </div>

   </div>

   <div class="box">

    <div class="box_img">

     <img src="images/7.jpg"/>

    </div>

   </div>

   <div class="box">

    <div class="box_img">

     <img src="images/3.jpg"/>

    </div>

   </div>

   <div class="box">

    <div class="box_img">

     <img src="images/8.jpg"/>

    </div>

   </div>

   <div class="box">

    <div class="box_img">

     <img src="images/9.jpg"/>

    </div>

   </div>

   <div class="box">

    <div class="box_img">

     <img src="images/4.jpg"/>

    </div>

   </div>

   <div class="box">

    <div class="box_img">

     <img src="images/0.jpg"/>

    </div>

   </div>

   <div class="box">

    <div class="box_img">

     <img src="images/5.jpg"/>

    </div>

   </div>

   <div class="box">

    <div class="box_img">

     <img src="images/10.jpg"/>

    </div>

   </div>

      <div class="box">

    <div class="box_img">

     <img src="images/1.jpg"/>

    </div>

   </div>

   <div class="box">

    <div class="box_img">

     <img src="images/6.jpg"/>

    </div>

   </div>

   <div class="box">

    <div class="box_img">

     <img src="images/2.jpg"/>

    </div>

   </div>

   <div class="box">

    <div class="box_img">

     <img src="images/7.jpg"/>

    </div>

   </div>

   <div class="box">

    <div class="box_img">

     <img src="images/3.jpg"/>

    </div>

   </div>

   <div class="box">

    <div class="box_img">

     <img src="images/8.jpg"/>

    </div>

   </div>

   <div class="box">

    <div class="box_img">

     <img src="images/9.jpg"/>

    </div>

   </div>

   <div class="box">

    <div class="box_img">

     <img src="images/4.jpg"/>

    </div>

   </div>

   <div class="box">

    <div class="box_img">

     <img src="images/0.jpg"/>

    </div>

   </div>

   <div class="box">

    <div class="box_img">

     <img src="images/5.jpg"/>

    </div>

   </div>

   <div class="box">

    <div class="box_img">

     <img src="images/10.jpg"/>

    </div>

   </div>

  </div> 

 </body>

</html>
*{
 margin:0px;
 padding:0px;
}
#waterfall{
 position: relative;
}
.box{
    padding: 15px 0 0 15px;
    float:left;
}
.box_img{
 padding: 5px;
 box-shadow: 0 0 6px #ccc;
 border-radius: 5px;
 border: 1px solid #ccc;
}
.box_img img{
 width:162px;
 height:auto;
}
window.onload = function(){
 
 autoPicture('waterfall','box');
 
 var imgData = {'data':[{'src':'images/4.jpg'},{'src':'images/3.jpg'},{'src':'images/2.jpg'},{'src':'images/1.jpg'},{'src':'images/5.jpg'},{'src':'images/46.jpg'},{'src':'images/7.jpg'},{'src':'images/8.jpg'},{'src':'images/10.jpg'},{'src':'images/9.jpg'},{'src':'images/13.jpg'},{'src':'images/12.jpg'},{'src':'images/11.jpg'}]};
 
 window.onscroll = function(){
  if(checkScrollSide()){
  var parentNode=document.getElementById('waterfall');
  for(var i=0;i<imgData.data.length;i++){
    /*var newImg = document.createElement('img');// 先创建一个IMG子节点
    newImg.src=imgData.data[i].src;     //img元素里面的SRC指向imgData里面的值
    var newDiv_biximg =document.createElement('div');// 创建一个div class="box-img"
    newDiv_biximg.className ='box-img';
    newDiv_biximg.appendChild(newImg);   //将img结点变成box-img的子节点
    var newDiv_box = document.createElement('div');
    newDiv_box.className = 'box';
    newDiv_box.appendChild(newDiv_biximg);
    parentNode.appendChild(newDiv_box);*/
    
    var newDiv_box = document.createElement('div');
    newDiv_box.className='box';
    parentNode.appendChild(newDiv_box);
    
    var newDiv_boximg =document.createElement('div');// 创建一个div class="box-img"
    newDiv_boximg.className='box_img';
    newDiv_box.appendChild(newDiv_boximg);
    
    var newImg = document.createElement('img');// 先创建一个IMG子节点
    newImg.src=imgData.data[i].src; 
    newDiv_boximg.appendChild(newImg);
    
  }
   autoPicture('waterfall','box');
  };
  
 }
 
}
 /*让图片自适应，互补
 *param1:父级元素
 *param2:子级元素
 */
function autoPicture(parent,box){
 var parentNode = document.getElementById(parent);//获取父级元素
 var boxNode = getClassObj(parentNode,box);//获取父级元素下box元素的数据
 var boxWidth=boxNode[0].offsetWidth;//所有的图片宽度相同，获取第一个的BOX宽度
 var winWidth=0;
 //获取当前浏览器窗口的宽
 if (window.innerWidth){
  winWidth = window.innerWidth;
 }else if ((document.body) && (document.body.clientWidth)){
  winWidth = document.body.clientWidth;  
 }
 //document.documentElement.clientWidth
 var num=Math.floor(winWidth/boxWidth);//每行容纳几张图片
 parentNode.style.cssText='width:'+boxWidth*num+'px;margin: 0 auto;';//设置父级居中样式
 var boxHeight=[];
 for(var i=0;i<boxNode.length;i++){
  var boxH=boxNode[i].offsetHeight;
  if(i<num){
   boxHeight.push(boxH);
  }else{
   var minH=Math.min.apply(null,boxHeight);
   var minHIndex=getMinHeigthIndex(boxHeight,minH);
   boxNode[i].style.position='absolute';
   boxNode[i].style.top=minH+'px';//offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的 
             //offsetTop 只读，而 style.top 可读写/offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
   boxNode[i].style.left=boxNode[minHIndex].offsetLeft+'px';//offsetLeft   返回对象相对于父级对象的布局或坐标的left值
                 //就是以父级对象左上角为坐标原点，向右和向下为X、Y轴正方向的x坐标
   boxHeight[minHIndex]+=boxNode[i].offsetHeight;
  }
 }
}
 /*获取子级元素
  *param1:父级元素
  *param2:子级元素类名
  */
function getClassObj(parents,className){
 var objParent = parents.getElementsByTagName('*');//获取父级元素的所有子元素
 var boxClass=[];//创建一个数组，存储子级className的元素
 for(var i=0;i<objParent.length;i++){
  //console.log(objParent[i]);结果如下
  /* <div class="box"><div class="box_img"><img src="images/1.jpg"> 
  <div class="box"><div class="box_img"> <img src="images/6.jpg">
  ........
  <div class="box"> <div class="box_img"><img src="images/10.jpg">*/
  
  if(objParent[i].className == className){
   boxClass.push(objParent[i]);
  }
 }
 return boxClass; 
}
function getMinHeigthIndex(boxHeight,minH){
 for(var i in boxHeight){
  if(boxHeight[i]==minH){
   return i;
  }
 }
 
}
function checkScrollSide(){
 var parentNode = document.getElementById('waterfall');
 var boxNode = getClassObj(parentNode,'box');
 var lastPicture = boxNode[boxNode.length-1].offsetTop+Math.floor(boxNode[boxNode.length-1].offsetHeight);
 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 var pageHeight = document.documentElement.clientHeight;
 return (lastPicture>pageHeight)?true:false;
}

转载于:https://my.oschina.net/renault/blog/610861

chengshuo3850
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
纯js实现div内图片自适应大小(已测试，兼容火狐)
12-09
这代码实现的功能就是平常我们遇到的一个div里面包含img的时候，在img图片大小未知，div大小未知的情况下，让图片自适应大小，对于图片本身小于div容器大小时，不作处理。因为如果拉伸，图片可能就失真了。 废话不多说，直接上代码，已测试，兼容火狐，谷歌，IE6，IE7/8 以下是js代码： 代码如下: [removed] [removed]=function(){ changeImgSize(); } function changeImgSize(){ var getContainer=docu
自适应瀑布流图片
yaya1286249672的博客
01-02 415
html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style> *{margin:0; padding:0;} #container{margin:auto; position:relative;} .box{position:absolute;padd
瀑布流效果（图片自适应）
圣三一
02-27 3570
上学期进行了一次swift实训，组里的小姐姐们说能不能用瀑布流的效果，开始我以为和通讯录那种行表式差不多，查看xcode里面有没有支持这种效果的方法，但是找了很久没有找到。于是准备自己动手，code了一天，但是还是没有弄出来，在组里大佬的提醒下，我意识到我没有必要自己造轮子，可以用别人写好的。于是推荐了我一个很好的网站：代码库，里面有许多别人做好的案例。 于是我开始进行搜索瀑布流相关的代码，但是我...
JS控制自适应瀑布流
captainLin600的博客
06-01 630
创建一个宽度固定，高度自适应且自动加载的waterfall简单网页。 HTML部分 1.首先页面内容如下（部分），每个图片都放在一个div中，再放入一个大div中。
自适应之瀑布流
小小少年
03-26 474
利用jquery 插件能够自适应的瀑布流 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user
javascript实现瀑布流自适应遇到的问题及解决方案
10-24
主要介绍了javascript实现瀑布流自适应遇到的问题及解决方案,需要的朋友可以参考下
javascript自适应宽度的瀑布流实现思路
12-01
总的来说，实现JavaScript自适应宽度的瀑布流布局涉及到CSS布局技巧、JavaScript事件监听（如窗口大小变化、滚动事件）以及数据获取和处理（如AJAX和JSON）。通过精心设计和优化，可以创建一个既美观又功能强大的...
超简单js实现响应式+自适应瀑布流
03-12
超简单js实现响应式+自适应瀑布流 原理：item平铺，设置基本宽度，根据基本宽度及窗口宽度算出列数，接着算出剩余宽度，看是否够间隔宽度，不够则列数减1， 然后窗口宽度减去所有间隔宽度再除以列数得到列的最张宽度...
利用JS实现简单的瀑布流加载图片效果
10-19
要实现一个简单的JavaScript瀑布流加载图片的效果，我们需要遵循以下步骤： 1. **设定布局参数**：首先确定页面的列数，这通常取决于屏幕宽度和每个元素的宽度。例如，我们可以根据屏幕宽度动态计算每行应该显示...
WebView注入Js代码实现大图自适应屏幕点击图片预览详情
谢栋的专栏
11-07 1365
  开题：android中webview通过url加载网页时，如果web页恰巧没对手机做单独适配的话，那我们拿到的url直接通过loadUrl的方式加载到webview上很容易出现一些适配上的问题，即使你通过websetings设置网页自适应，也很难处理部分细节上的样式，特别是图片资源，部分css样式是按照pc端的适配去做的，load到手机上很容易出现样式问题，下面就拿网页上适配前跟适配后的网页...
JS图片自适应显示
技术无止境
02-07 1397
在上一家公司的时候，由于项目的关系就一直想写一个这样的类出来用的了，无奈各种原因，搁置了。     刚好前段时间公司有个博客的项目，就心血来潮，搞了一个出来。在制作相册页面的时候很纠结。用户上传的照片的格式会有很多种，那么怎么才能让所有不同尺寸的图片都用相同的尺寸来显示而不影响排版呢？     分享两个自己写的方法          // JavaScript Document //重定义图片宽高
Vue原生图片瀑布流
hjx154954264的博客
05-20 4046
图片瀑布流可以节省图片的排版空间，美观图片的排列，避免图片排列的参差不齐。 实现图片瀑布流可以固定宽（花瓣），也可以固定高（百度图片），看个人需求，我的需求是宽固定。 如果图片的排列不适用瀑布流的话，排版如下： 是不是特别的难以接受，的确，自己都无法接受，更别说展示给他人观看了。 如果使用瀑布流，排版如下： 那可真是天差地别啊，如此美观的排列，简直让人心情愉悦。 图片瀑布流代码： HTML <div class="waterFall-box" ref="box"> <div c
设置预览图片自适应(保持原比例)
weixin_30871701的博客
08-18 676
function resizeImage(image, max) { if (Math.max(image.width, image.height) > max) { if (image.width > image.height) image.width = max; else image.height = max; } ...
RecyclerView实现瀑布流，图片自适应高度
热门推荐
FC小司的博客
12-05 2万+
话不多说，先上效果图 对于RecyclerView，相信大家都不陌生了，这个集listView，GridView，瀑布流效果与一身强大控件，渐渐地渗透在每个App.... 还是回到正题，如何让RecyclerView里的图片自适应高度？ 我们知道，要让RecyclerView有瀑布流效果，RecyclerView设置的layoutManager必须是StaggeredGridLayo
原生JS实现瀑布流布局
CaseyWei
08-14 1260
一.瀑布流之准备工作 　　   首先声明下, 为了方便演示和联系, 我使用的是本地图片, 如果大家有需要的话可以尝试着写下网络的, 不过本地和远端的大致是相同的. 那么我就来简单介绍下本地的瀑布流效果吧, 我们要先准备好八九张图片, 当然啦, 我们实现的是瀑布流效果, 所以最好是高度不相同的, 这样才可以看出来效果, 对吧, 嘿嘿. 二.代码的准备工作 　　  我们打开开发工具, 先建个ht...
Java面试整理，涵盖基础、JVM、线程并发、框架、MySQL、微服务、Redis、中间件、数据结构与算法等。陆续完善中.zip
07-31
Java面试整理，涵盖基础、JVM、线程并发、框架、MySQL、微服务、Redis、中间件、数据结构与算法等。陆续完善中
chromedriver-mac-x64_121.0.6167.184.zip
最新发布
07-31
chromedriver-mac-x64_121.0.6167.184.zip
【Java面试+Java技术文章汇总】 涵盖大部分Java程序员所需要掌握的核心知识。.zip
07-31
【Java面试+Java技术文章汇总】 涵盖大部分Java程序员所需要掌握的核心知识。
资源管理的艺术：使用MySQL用户资源配额优化性能
07-31
MySQL是一个流行的开源关系型数据库管理系统（RDBMS），广泛用于Web应用程序的后端数据存储。它基于结构化查询语言（SQL）来管理数据，并且是LAMP（Linux, Apache, MySQL, PHP/Python/Perl）技术栈的一部分，这个技术栈常用于构建动态网站和Web应用程序。 MySQL的特点包括： - **开放源代码**：MySQL的源代码是公开的，任何人都可以自由使用和修改。 - **跨平台**：MySQL可以在多种操作系统上运行，包括Linux、Windows、macOS等。 - **高性能**：MySQL以其快速的查询处理和良好的性能而闻名。 - **可靠性**：MySQL提供了多种机制来确保数据的完整性和可靠性，包括事务支持、备份和恢复功能。 - **易于使用**：MySQL提供了简单直观的界面和丰富的文档，便于用户学习和使用。 - **可扩展性**：MySQL支持从小型应用到大型企业级应用的扩展。 - **社区支持**：由于其广泛的使用，MySQL拥有一个活跃的开发者社区，提供大量的资源和支持。 MySQL被广泛应用于各种场景，包括在线事务处理（OL
hbuilder如何实现图片瀑布流用循环代码实现
06-01
在 Hbuilder 中实现图片瀑布流，可以使用循环代码结合 CSS 样式来实现。具体步骤如下： 1. 在 HTML 文件中创建一个容器，用于存放瀑布流中的图片，如下所示： ``` <!-- 这里用循环代码动态生成图片 --> ``` 2....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值