JavaScript实现图片瀑布流和底部刷新

2024-12-29 03:31:53

瀑布流现在基本上是图片显示网页的标配，主要是为了适配图片和文字块的大小，使显示出的效果没有那么呆板
实现这个功能首先要有html，css和js基础

首先先实现瀑布流

即下一行的图片放在上一行的凹下去的地方

基本的html代码如下

<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>瀑布流</title>
 <link rel="stylesheet" type="text/css" href="css/style.css">
 <!--script不能用<script/>-->
 <script src="js/app1.js"></script>
</head>
<body>
<div id="container">
 <div class="box">
  <div class="img_box">
   <img src="images/1.jpg">
  </div>
 </div>
 <div class="box">
  <div class="img_box">
   <img src="images/2.jpg">
  </div>
 </div>
 <div class="box">
  <div class="img_box">
   <img src="images/3.jpg">
  </div>
 </div>
 <div class="box">
  <div class="img_box">
   <img src="images/4.jpg">
  </div>
 </div>
 <div class="box">
  <div class="img_box">
   <img src="images/5.jpg">
  </div>
 </div>
 <div class="box">
  <div class="img_box">
   <img src="images/6.jpg">
  </div>
 </div>
 <div class="box">
  <div class="img_box">
   <img src="images/1.jpg">
  </div>
 </div>
 <div class="box">
  <div class="img_box">
   <img src="images/2.jpg">
  </div>
 </div>
 <div class="box">
  <div class="img_box">
   <img src="images/3.jpg">
  </div>
 </div>
 <div class="box">
  <div class="img_box">
   <img src="images/4.jpg">
  </div>
 </div>
 <div class="box">
  <div class="img_box">
   <img src="images/5.jpg">
  </div>
 </div>
</div>
</body>
</html>

然后再写一下css

*{
 margin: 0px;
 padding: 0px;
}
/*container为相对布局*/
#container{
 position:relative;
}
/*box向左浮动*/
.box{
 padding:5px;
 float: left;
}
/*加一些边框*/
.img_box{
 padding: 5px;
 border:1px solid #ccc;
 box-shadow:0 0 5px #ccc;
 border-radius: 5px;
}
/*宽度固定，高度自适应，使图片不变形*/
.img_box img{
 width: 150px;
 height: auto;
}

接下来就是这次的核心，写js

//开始加载要执行的方法
window.onload=function(){
 imgLocation("container","box")
}
function imgLocation(parent,content){
 var cparent=document.getElementById(parent);
 var ccontent=getChildElement(cparent,content)
 //图片宽度
 var imgWidth=ccontent[0].offsetWidth;
 //每一行图片个数
 var cols= Math.floor(document.documentElement.clientWidth/imgWidth);
 //使宽度一定，内容居中
 cparent.style.cssText="width:"+imgWidth *cols+"px;margin:0 auto";

 var BoxHeightArr=[];
 for(var i=0;i<ccontent.length;i++){
  //获取第一行图片的高度
  if (i<cols){
   BoxHeightArr[i]=ccontent[i].offsetHeight;
  }else {
   //Math.min对数组要加上apply
   var minheight=Math.min.apply(null,BoxHeightArr);
   var minIndex=getminheightLocation(BoxHeightArr,minheight)
   //设为绝对布局使内容不随屏幕大小改变
   ccontent[i].style.position="absolute";
   ccontent[i].style.top=minheight+"px";
   ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";
   //该列的高度加上后添加进去图片高度
   BoxHeightArr[minIndex]=BoxHeightArr[minIndex]+ccontent[i].offsetHeight

  }
 }
}
//获取最小高度的位置
function getminheightLocation(BoxHeightArr,minHeight){
 for(var i in BoxHeightArr){
  if (BoxHeightArr[i]==minHeight){
   return i;
  }
 }
}
function getChildElement(parent,content){
 var contentArr=[];
 //获取所有子Element
 var allcontent=parent.getElementsByTagName("*")
 for(var i=0;i<allcontent.length;i++){
  //如果className是box就添加进去
  if (allcontent[i].className==content){
   contentArr.push(allcontent[i]);
  }
 }
 return contentArr
}

这样就简单实现了瀑布流效果

接下来是下拉到底部自动刷新

主要是在滚动时监听是否到底部，到达差不多底部的位置就加载

添加以下代码即可

window.onscroll=function(){
 //模拟数据
 var imgData={"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]}
 if (checkFlag()){
  var cparent=document.getElementById("container");
  for(var i =0;i<imgData.data.length;i++){
   var ccontent=document.createElement("div");
   ccontent.className="box";
   cparent.appendChild(ccontent);
   var boximg=document.createElement("div");
   boximg.className="img_box";
   ccontent.appendChild(boximg);
   var img=document.createElement("img");
   img.src="images/"+imgData.data[i].src;
   boximg.appendChild(img);
  }
  //按照之前规则排列
  imgLocation("container","box")
 }
}
function checkFlag(){
 var cparent=document.getElementById("container");
 var ccontent=getChildElement(cparent,"box");
 //最后一张图片距离顶部距离
 var lastContentHeight=ccontent[ccontent.length-1].offsetTop;
 //当前距离
 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
 //该页面显示的高度
 var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;
 //如果差不多到达底部则返回true
 if (lastContentHeight<scrollTop+pageHeight){
  return true;
 }
}

效果图如下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

瀑布流的实现方式（原生js+jquery+css3）

前言项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现的... 原生javascript版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流-javascript</title> <s
详解javascript实现瀑布流绝对式布局

瀑布流也应该算是流行几年了吧.首先是由Pinterest掀起的浪潮,然后国内设计如雨后春笋般,冒出很多瀑布流的例子,比如,蘑菇街,Mark之(不过最近涉黄,好像被喝茶了),还有淘宝的 "哇哦". 这些都是很棒的例子, 今天我们就聊一聊瀑布流. 一.绝对式布局: JS实现原理其实瀑布式主要的难点就在于,如果将图片整齐的排列在对应的列下,以及什么时候开始刷新加载图片. 而图片整齐的排列的主要逻辑和算法即,先获取容器内可以放多少列,然后,通过计算,存放第一列的高度,再遍历剩下(除第一列的元
详解javascript实现瀑布流列式布局

本文介绍了javascript瀑布流列式布局的相关内容,分享给大家供大家参考,具体内容如下 JS原理上面说了,列式布局简直算是完虐绝对式布局. 绝对式布局,简直就像10元/天的搬砖工.而列式布局就是站在那看他搬砖的监工. 同样都是搬砖的,一个卖苦力,一个秀智商.简直了!!! 听了逼逼,我们来直面一下惨淡的人生. 列式布局的原理其实和绝对式布局没有太大的却别. 同样也有3个部分, 一是页面加载自适应,二是滑动加载,三是响应式布局. 分别讲解: 1.加载自适应我们先看一下代码吧: var $
javascript瀑布流式图片懒加载实例解析与优化

之前写过一版图片"懒加载"的文章,刚好周末在整理文件的时候,大概又看了一遍之前写的代码发现有很多可以优化的地方. 这篇文章主要就是结合上篇<javascript瀑布流式图片懒加载实例>再来看看图片"懒加载"的一些知识. 图片"懒加载"的主旨: 按照需要加载图片,也就是说需要显示的时候再加载图片显示,减少一次性加载的网络带宽开销. 先来看一段代码: var conf = { 'loadfirst': true, 'loadimg': t
解析javascript瀑布流原理实现图片滚动加载

先科普下瀑布流吧瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest,逐渐在国内流行开来.国内大多数清新站基本为这类风格,像美丽说.淘宝网都有使用. 这是我实现的一个效果,就是怎么滚动都加载不玩.就跟瀑布一样流啊流! 这里的实现方式我们只说Js实现方法实现原理: 对容器中已有数据块元素进行第一次计算1 容器总宽度 2 列宽度 3 最小列数 ,得到列数
javascript实现瀑布流动态加载图片原理

本文实例为大家分享了js瀑布流加载效果,动态加载图片,供大家参考,具体内容如下鼠标滚动事件,当鼠标滚动到下边,动态加载图片. 1. HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js实现瀑布流效果-动态加载图片</title> <link rel="stylesheet" href="
javascript瀑布流式图片懒加载实例

最近项目使用到了"懒加载",现在更新一般,因为平时主要使移动端的开发所以库文件使用的是zepto.js .当然也可以和jQuery 通用. 代码如下: /** * Created by zhiqiang on 2015/10/14. * hpuhouzhiqiang@gmail.com * 图片的懒加载 **/ function loadImgLazy(node) { var lazyNode = $('[node-type=imglazy]', node), mobileHeight
纯js实现瀑布流布局及ajax动态新增数据

本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax模拟数据图片后,是将整个页面的所有图片都重新定位一次. 3. 程序是等所有图片加载完成后再读取图片的尺寸,实际中肯定不能这样做. 4. 实际项目中,应该由后台程序给出图片尺寸值,在js代码中直接使用图片的width属性. 本程序思路: html结构: <body> <div id="
javascript实现瀑布流加载图片原理

讲一下大概的原理吧,还是先上图: 功能描述: 根据不同菜单的属性值分别加载不同的数据下拉滚动条到一定位置预加载图片,滚动条拉到最底下的时候渲染html: 鼠标移到菜单,切换各个图片列表: 鼠标移到图片列表上,显示详细信息: 技术实现方案: 先梳理一下从加载到显示的流程: 1. 加载数据 2. 拼接HTML写入到页面 3. 检查刚刚写入的HTML中的img是否全部加载完成,如果是,进入5.否则进入4 4. 等待图片加载完成 5. 计算每个元素的位置一开始的时候最头疼的是如何定位的问题,后来
js实现瀑布流的三种方式比较

瀑布流是一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest,逐渐在国内流行开来.国内大多数清新站基本为这类风格. 瀑布流特点: 1.琳琅满目:整版以图片为主,大小不一的图片按照一定的规律排列. 2.唯美:图片的风格以唯美的图片为主. 3.操作简单:在浏览网站的时候只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你面前. 瀑布流布局实现方式: 1.传统多列浮动 · 各列固定宽度,并且

JavaScript实现图片瀑布流和底部刷新

相关推荐

随机推荐