江苏龙网

  1. 主页 > 生活百科 > >

JQuery实现瀑布流

JQuery瀑布流


JQuery实现瀑布流

文章插图
 
这里需要jquery-2.1.1.min.js文件，请自行下载，图片请自行下载
首先，创建一个.html文件<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title></title><script src=https://www.isolves.com/it/cxkf/bk/2020-08-05/"js/jquery-2.1.1.min.js" type="text/JAVAscript">
JQuery实现瀑布流
JQuery实现瀑布流
JQuery实现瀑布流
JQuery实现瀑布流
JQuery实现瀑布流
JQuery实现瀑布流
JQuery实现瀑布流
JQuery实现瀑布流
JQuery实现瀑布流
JQuery实现瀑布流
写它的样式：style.css,创建一个css文件夹，把这个css样式放入到此文件夹里面*{margin: 0;padding: 0;}.box{position: relative;float: left;}.content{padding: 10px;border: 1px solid #ccc;box-shadow: 0 0 5px #ccc;/*添加边框阴影*/border-radius: 5px;/*圆角边框为5像素*/
JQuery实现瀑布流

文章插图
 
目前是这种效果，这里就需要考虑，怎么让第二行的第一个图片接着第一行里面图片高度最小的图片下面
创建一个app.js文件
$(function(){$(window).on("load", function () {imgLocation();});});function imgLocation(){var box=$(".box");var boxWidth=box.eq(0).width();//获取图片的宽度var num= Math.floor($(window).width()/boxWidth);//确定一排能摆放几个var boxArry=[];//存储所有box的高度box.each(function(index,value){var boxHeight=box.eq(index).height();//盒子的高度if(index<num){boxArry[index]=boxHeight;//往数组添加}else{var minboxHeigh=Math.min.apply(null,boxArry);//获取最小盒子的高度var minboxIndex= $.inArray(minboxHeigh,boxArry);//获取盒子的位置$(value).css({//设置第二行的第一张图片在第一行高度最小的那张图片下面"position":"absolute","top":minboxHeigh,"left":box.eq(minboxIndex).position().left});boxArry[minboxIndex]+=box.eq(index).height();//记录第一行的最小高度和第二行第一个图片的高度}});}现在实现瀑布流的效果了
JQuery实现瀑布流

文章插图
 
接下来就要实现滚动跳下来，实现自动加载图片的效果
如下是完整的app.js 内容：
$(function(){$(window).on("load", function () {imgLocation();var dataImg={"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"10.jpg"}]};window.onscroll=function(){if(scollside()){$.each(dataImg.data,function(index,value){//动态创建div//动态创建内容div//动态创建img，将src动态解析添加到内容层里面var box=$("<div>").addClass("box").appendTo($("#container"));var content=$("<div>").addClass("content").appendTo(box);$("<img>").attr("src","./img/"+$(value).attr("src")).appendTo(content);});imgLocation();//再次调用一下瀑布流效果，不然不会出现瀑布流效果}};});});function scollside(){var box=$(".box");/*box.last().get(0).offsetTop 盒子最后一个对象距顶端的距离*//*Math.floor(box.last().height/2) 最后图片的高度的一半*/var lastboxHeigh=box.last().get(0).offsetTop+Math.floor(box.last().height()/2);var documentHeight=$(document).width();//当前容器的高度var scollHeight=$(window).scrollTop();//return (lastboxHeigh<documentHeight+scollHeight)?true:false;//如果当前滚动高度和容器高度大于最后盒子的高度则加载图片}function imgLocation(){var box=$(".box");var boxWidth=box.eq(0).width();//获取图片的宽度var num= Math.floor($(window).width()/boxWidth);//确定一排能摆放几个var boxArry=[];//存储所有box的高度box.each(function(index,value){var boxHeight=box.eq(index).height();//盒子的高度if(index<num){boxArry[index]=boxHeight;//往数组添加}else{var minboxHeigh=Math.min.apply(null,boxArry);//获取最小盒子的高度var minboxIndex= $.inArray(minboxHeigh,boxArry);//获取盒子的位置$(value).css({//设置第二行的第一张图片在第一行高度最小的那张图片下面"position":"absolute","top":minboxHeigh,"left":box.eq(minboxIndex).position().left});boxArry[minboxIndex]+=box.eq(index).height();//记录第一行的最小高度和第二行第一个图片的高度}});}


推荐阅读


上一篇：喝大红袍的功能与禁忌,红豆薏米芡实茶的禁忌

下一篇：怀孕喝浓茶有什么坏处,有什么禁忌