基于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 相关文章推荐
List Installed Hot Fixes
Jun 12 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 Javascript
JS 拦截全局ajax请求实例解析
Nov 29 Javascript
js编写选项卡效果
May 23 Javascript
bootstrap中的导航条实例代码详解
May 20 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 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
基于PHP文件操作的详解
2013/06/05 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
extjs之去除s.gif的影响
2010/12/25 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
JavaScript封闭函数及常用内置对象示例
2019/05/13 Javascript
原生js实现下拉选项卡
2019/11/27 Javascript
Vue 实现拨打电话操作
2020/11/16 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
python解析含有重复key的json方法
2019/01/22 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
python 实现两个线程交替执行
2020/05/02 Python
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
信息科学与技术专业求职信范文
2014/02/20 职场文书
高考标语大全
2014/06/05 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL