瀑布流现在基本上是图片显示网页的标配,主要是为了适配图片和文字块的大小,使显示出的效果没有那么呆板
实现这个功能首先要有html,css和js基础
首先先实现瀑布流
即下一行的图片放在上一行的凹下去的地方
基本的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
这样就简单实现了瀑布流效果
接下来是下拉到底部自动刷新
主要是在滚动时监听是否到底部,到达差不多底部的位置就加载
添加以下代码即可
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
效果图如下
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。