`
阅读更多
【前言】    近期开始讲到高阶JS,为了提高学习兴趣,再讲点特效。本次简单总结下JS实现瀑布流特效    样式特点:      (1)呈现出等宽不等高,参差不齐排列      (2)拖动滚动条时会不断加载新数据,甚至可以无限往下拖动,一直拖一直加载新数据    实现方案:       ①原生JS;②jQuery库;③CSS3的多栏布局   【主体】    直接上代码,具体意思里面有注释,注意文件位置 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS</title> <style type="text/css"> /*代码初始化*/ *{ margin: 0; padding: 0; } /*代码主体*/ #main{ position: relative; margin: 0 auto; } /*砖头缝隙*/ .box{ padding: 15px 0 0 15px; float: left; } /*盒子样式*/ .pic{ padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 5px #ccc; } .pic img{ width: 165px; height: auto; } </style> <link rel="stylesheet" type="text/css" href="http://www.iteye.com/img/animate.css"> </head> <body> <div id="main"> <div class="box"> <div class="pic"> <img src="img/01.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/02.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/03.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/04.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/05.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/06.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/07.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/08.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/09.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/10.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/01.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/02.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/03.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/04.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/05.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/06.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/07.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/08.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/09.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/10.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/01.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/02.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/03.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/04.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/05.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/06.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/07.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/08.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/09.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/10.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/01.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/02.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/03.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/04.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/05.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/06.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/07.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/08.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/09.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/10.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/01.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/02.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/03.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/04.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/05.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/06.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/07.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/08.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/09.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/10.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/01.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/02.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/03.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/04.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/05.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/06.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/07.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/08.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/09.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/10.jpg"> </div> </div> </div> <script type="text/javascript"> var dataList = { "data":[ {"src":"01.jpg"}, {"src":"02.jpg"}, {"src":"03.jpg"}, {"src":"04.jpg"}, {"src":"05.jpg"}, {"src":"06.jpg"}, {"src":"07.jpg"}, {"src":"08.jpg"} ] } window.onload = function(){ waterFall(); window.onscroll = function(){ change(); } } function waterFall(){ //1、获取box盒子 var main = document.getElementById("main"); var box = main.getElementsByClassName("box"); //2、计算列数(页面宽/box宽) var boxWidth = box[0].offsetWidth;//盒子宽度 var docWidth = document.documentElement.clientWidth;//页面宽度 var cols = Math.floor(docWidth/boxWidth); // 3、设置main宽度 main.style.width = boxWidth*cols+"px"; // 4、对比高度 var boxArray = [];//存放每一列高度 for(var i=0;i<box.length;i++){ if(i<cols){ boxArray.push(box[i].offsetHeight); }else{ // 5、计算最矮高度 var minH = Math.min.apply(null,boxArray);//最矮高度 var MinHindex = boxArray.indexOf(minH); //6、设置下一行图片位置 box[i].style.position = "absolute"; box[i].style.top = minH + "px"; //左侧计算boxbox[i].style.left = boxWidth*MinHindex + "px"; box[i].style.left = box[MinHindex].offsetLeft + "px"; // 7、添加完后,将其高度做改变 boxArray[MinHindex] += box[i].offsetHeight; } } } //检测是否具备记载条件 function change(){ //判断是否具备加载条件 //1、获取box盒子 var main = document.getElementById("main"); var box = main.getElementsByClassName("box"); // 2、获取最后一个块距离父级元素main的顶部距离 var lastBoxH = box[box.length-1].offsetTop; var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; var height = document.body.clientHeight || document.documentElement.clientHeight; if(scrollTop+height>lastBoxH){ //将数据块放到页面里 // (1)遍历数据 for(var i=0;i<dataList.data.length;i++){ // (2)创建元素节点 var newBox = document.createElement("div"); // newBox.setAttribute("class","box"); newBox.className = "box animated slideInUp"; main.appendChild(newBox); var newPic = document.createElement("div"); newPic.className = "pic"; newBox.appendChild(newPic); var newImg = document.createElement("img"); newImg.src = "img/"+dataList.data[i].src; newPic.appendChild(newImg); } //新增后再次瀑布流 waterFall(); } } </script> </body> </html>     .
分享到:
评论
相关资源推荐
  • 原生JavaScript实现瀑布流布局 常见的网页布局模式有静态,自适应,瀑布流,响应式等模式,本文将重点讲述通过原生JavaScript代码实现瀑布流布局的过程
  • 原生js开发图片瀑布流布局的懒加载效果 效果分一下步骤去做:1.图片简单布局,要根据浏览器的宽度和图片的宽度改变图片的列数;2.图片动态填充相应的位置,需要找出图片流里边最低图片的高度和其索引值,然后将图片流的数据填充到相应位置;3.滚轮事件获取加载数据;4.设置加载动画,并且对动画设定延时器
  • 原生js实现瀑布流布局
  • JS瀑布流效果 原生js写的瀑布流效果
  • 原生js瀑布流布局+图片懒加载 瀑布流布局 function waterfall(ele,col,eleWidth){ var hArr = []; for(var i = 0;i < ele.length;i++){ if(i < col){ hArr.push(ele[i].offsetHeight); }else{ //min
  • 前端js瀑布流特效 一个原生js制作的js瀑布流特效,实现百度图片网址中的瀑布流效果
  • JS原生瀑布流 今天早起看了慕课的瀑布流,的确讲的十分详细,也十分的好,我在博客里也就只能给代码加些注释,和说一下思路。建议大家去看一下慕课的瀑布流教程,非常详细,每一个细节都讲的非常好,只要懂JS的基础代码,看起来应该不是多大问题,里面没有太难得方法,但自己写不出来还是因为思路上有问题,下面就详细说一下几个重点方法的代码,建议大家去慕课详细学习 HTML 和CSS没有太难得地方<div id="main">//
  • 原生js实现瀑布流效果 瀑布流是一种比较流行的展示型效果。适用于内容区比较多的单页面,目前很多图片展示型页面都普遍用了这个效果。今天和大家分享下原生JS实现瀑布流。希望共同学习交流。
  • 原生JS实现瀑布流布局 一.瀑布流之准备工作      首先声明下, 为了方便演示和联系, 我使用的是本地图片, 如果大家有需要的话可以尝试着写下网络的, 不过本地和远端的大致是相同的. 那么我就来简单介绍下本地的瀑布流效果吧, 我们要先准备好八九张图片, 当然啦, 我们实现的是瀑布流效果, 所以最好是高度不相同的, 这样才可以看出来效果, 对吧, 嘿嘿. 二.代码的准备工作     我们打开开发工具, 先建个ht...
  • 原生JS实现瀑布流效果 这里是以3列图片为例,实现一个简单的效果。当然2列或者3列以上也可以,可以根据可视区域宽度以及图片宽度来做动态判断,实现多种屏幕的自适应。这里主要是体现核心思路,即下一列的第一张图片优先贴在上一列高度最小的图片下方,后面的排列方式依此类推。如下图所示 简单写点样式<style> *{margin:0;padding:0;} a{display:block;width
  • 原生js瀑布流怎么做,如何用原始js做一个瀑布流效果 效果图: 思路: //瀑布流: //前提:每张图片的宽度一样,高度不一定相同,如:width; //思路: //1、明确总列数:可视区域的宽度除以每张图片的宽度取整;如:totalcolumn = parseInt(clientWidth/width); //2、计算列与列之间的间隔:可视区域宽度取余每张图片的宽度除以(总列数+1)。如:spaceWidth=clientWidth
  • html5实现瀑布流效果 html5实现瀑布流效果
  • 前端攻城狮---AJAX(瀑布流的编写与应用) 本章节主要是讲解瀑布流的集中编写方式和结合ajax的下拉加载更多。下面看看效果图是的 瀑布流方式一:依次排列 什么叫依次排列呢?就是所有的item从左到右依次排列,当超过父view的宽度时,换行继续排列。 效果图如下: 里面的数字其实就是一张张图片。我们先来看看布局 &amp;lt;div class=&quot;waterfall&quot;&amp;gt; &amp;lt;div class=...
  • 原生javascript图片懒加载效果代码。
  • 原生js简单瀑布流图片无限加载带鼠标悬停图片遮罩效果 原生js简单瀑布流图片无限加载带鼠标悬停图片遮罩效果,超美的效果,个人最喜欢这个瀑布流,欢迎交流学习!!!
  • 瀑布流(加载更多) 瀑布流(加载更多):http://blog.csdn.net/libin_1/article/details/50449837
  • 原生JS实现瀑布流及加载效果 瀑布流是目前一种比较流行的页面布局和加载效果
  • 原生js实现瀑布流以及加载效果——李帅醒博客 今天教大家使用原生js实现瀑布流以及加载效果,下回再教大家使用使用原生JS实现响应式瀑布流布局,还是先从简单的入手! 1、首先列数是固定的,不同的是高度,随机产生。 2、一排结束后,如第6个元素,是添加再上一排最短的位置,所以要做一个大小高度判断。 3、每次滚动条触发事件,加载新的元素(判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scroll
  • 原生JS瀑布流插件Macy.js
  • 原生js结合css3实现横向瀑布流及懒加载 实例
Global site tag (gtag.js) - Google Analytics