基于JavaScript实现瀑布流效果


Posted in Javascript onMarch 29, 2017

本文实例为大家分享了js实现瀑布流效果的具体代码,供大家参考,具体内容如下

前端内容:

使用JavaScript和四个div,将照片放入四个div中

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  .container {
   width: 1000px;
   margin: 0 auto;
   background-color: lightgray;
  }
 
  .item {
   width: 24%;
   margin-right: 10px;
   float: left;
  }
  .item img{
   width: 100%;
  }
 
 </style>
</head>
<body>
{#将内容放在container中#}
<div class="container">
{# 将图片内容放入四个item中,形成四个item#}
 <div class="item"></div>
 <div class="item"></div>
 <div class="item"></div>
 <div class="item"></div>
 
</div>
<script src="/static/js/jquery-2.1.4.min.js"></script>
<script>
 $(function () {
{#  网页加载时自动执行#}
  var obj = new ScrollImg();
  obj.fetchImg();
  obj.scrollEvent();
 })
 
{# 定义对象#}
 function ScrollImg() {
  this.nid = 0;
{#  取照片方法#}
  this.fetchImg = function () {
   var that = this
   $.ajax({
    url: '/get_imgs.html',
    type: 'GET',
{#  传输数据,已经取了多少照片,后台可以依据,继续取照片#}
    data: {'nid': that.nid},
    dataType: 'JSON',
    success: function (args) {
     if (args.status) {
      var img_list = args.data;
      $.each(img_list, function (index, obj) {
       var eqv = that.nid % 4;
       var tag = document.createElement('img')
       tag.src = '/' + obj.img_dir;
       console.log(eqv)
       $('.container').children().eq(eqv).append(tag)
       that.nid += 1;
      })
     }
    }
   })
  }
{#  监听滚动条,当滚到底部时,自动加载数据#}
  this.scrollEvent = function () {
   var that = this;
   $(window).scroll(function () {
    var srollTop = $(window).scrollTop();
    var winHeight = $(window).height();
    var docHeight = $(document).height();
    if (srollTop + winHeight >= docHeight - 2) {
     that.fetchImg();
    }
   })
  }
 }
</script>
</body>
</html>

后台内容:

基于Django的FBV,函数视图,进行数据的读取和处理ajax请求

def get_imgs(request):
 # 获取已经取得的照片数目
 index = request.GET.get('nid')
 #获取QuerySet集合对象,取从index后的10调数据
 imgs_list = models.Student.objects.values('id','img_dir','name')[index:index+10]
 imgs_list = list(imgs_list)
 # 传送状态和数据内容
 ret = {
  'status':True,
  'data':imgs_list
 }
 return JsonResponse(ret)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
常用的几段javascript代码分享
Mar 25 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
May 26 Javascript
JS &amp; JQuery 动态添加 select option
Jun 08 Javascript
简单实现node.js图片上传
Dec 18 Javascript
JS简单实现获取元素的封装操作示例
Apr 07 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 Javascript
微信小程序进入广告实现代码实例
Sep 19 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 #Javascript
JS变量及其作用域
Mar 29 #Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 #Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 #Javascript
vue2组件实现懒加载浅析
Mar 29 #Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 #Javascript
如何使用Bootstrap创建表单
Mar 29 #Javascript
You might like
虫族 Zerg 魔法科技
2020/03/14 星际争霸
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
js getBoundingClientRect使用方法详解
2019/07/17 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
利用Python破解验证码实例详解
2016/12/08 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
有关Python的22个编程技巧
2018/08/29 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
Python识别处理照片中的条形码
2020/11/16 Python
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
国外平面设计第一市场:99designs
2016/10/25 全球购物
印尼旅游网站:via
2017/11/12 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
汉语言文学毕业生求职信
2013/10/01 职场文书
国际经济贸易专业推荐信
2013/11/06 职场文书
年终晚会主持词
2014/03/25 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
安全先进班组材料
2014/12/26 职场文书
故宫导游词
2015/01/31 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
美丽的大脚观后感
2015/06/03 职场文书
2016年公司新年寄语
2015/08/17 职场文书
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL