想做一个瀑布流获取图文的方式，想高手给个代码能够获取数据库的文件_百度知道
想做一个瀑布流获取图文的方式，想高手给个代码能够获取数据库的文件
getResource:function(index,render){//index为已加载次数,render为渲染接口函数,接受一个dom集合或jquery对象作为参数。通过ajax等异步方法得到的数据可以传入该接口进行渲染，如 render(elem)
if(index&=7) index=index%7+1;
我有更好的答案
我也在用这个插件做瀑布流，用json能够调用数据，但是每次加载都只能加载json中所有数据，借楼问下，如何给每次加载一定数量的数据，比如我想每次只加载20条数据，要如何修改？附上json调用代码
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。ajax学习实例之瀑布流 - 简书
ajax学习实例之瀑布流
初学者在某课堂学习ajax的过程中，有做一个瀑布流形式的小实例，为了加深理解知识点，因此把做实例的过程记录下来。首先要实现的页面的最终样式是这样的：
最终效果图
效果：1.四列布局，每列等宽；2.每一列内的每一个包含文字和图片的块的高度是不一样的，由内容确定，因此看起来是交错的；3.一次加载的页面是有限的，当翻滚到底部时才会继续加载下一页。现在要求已经明确了，那么开始工作：一、工具和环境HBuilder、Google浏览器、wampserver服务器环境、一个php数据文件。二、页面布局因为本实例只做瀑布流效果，因此布局比较简单：
最终页面结构
这就是大体页面结构，因为li里的内容会是动态变化的，因此通过javascript来动态添加添加，但是为了方便编写样式，因此先添加一点内容，之后再删除：
添加li的内容
下图就是初步效果图，可以看到分为四列，高度不一，而后面的单个图片我是通过在li中添加div来实现的，因此整个页面总共就只有四列。看到了效果后，把所有的div删掉，接下来编写JavaScript，通过js来动态生成内容。
初步效果图
三、JS部分js部分主要需要实现的功能有一下几个部分：1.动态生成页面结构：其中，用来生成页面结构的所有数据都是有php文件形式的，因此需要用到ajax来获取数据，然后再对数据进行处理，生成页面结构，因为有的div内容不一样，高度不相同，为了防止有的li越来越长，而有的却较短，因此页面中的每一个新的div都会接在最短的li中，这样整个页面就会较为均衡的向下添加内容；2.实现滚动加载效果：在前面的的基础上通过ajax实现动态加载。1.生成页面结构首先，获得页面上的元素
然后获取php文件中的数据，数据格式是这样的
这里通过一个封装好的函数来进行获取：
获取数据函数
因为ajax中get方式和post方式获取数据的方法不同，因此需要进行一些判断处理，另外数据的处理是通过一个函数来进行处理，然后调用ajax函数：
ajax函数得到的会是一大串类似JSON格式的字符串，因此通过JSON对象的parse方法把数据转为json对象，这样方便利使用。这里获取到的只是第一页的数据，接下来，就在这个处理函数中生成页面结构：
生成页面架构
这部分代码就写在上文的后面，其中还用到了一个函数getShort(),用来获取最短的li的索引，这样整个页面结构就生成了：
因为数据源的原因，有些图片展示不出来。现在页面结构生成了，现在还有一个需求，就是在页面翻滚到底部时，继续加载下一页。2.翻滚加载更多数据当页面翻滚到底部时需要加载更多数据只需要在调用一遍ajax函数即可，但是由于ajax函数内部的数据处理函数还包含着更多内容，因此在外部用一个函数进行封装，方便调用：
现在加载的知识第一页数据，要想页面翻滚到底部时加载新的页面，不能把页数写死，因此，创建一个新变量，来改变加载的页数：
用鼠标滚轮事件来调用函数，原理就是当最短li的底部出现在可视区内以后，说明滚动到底了，这里需要用到getTop()函数；然后调用getList()函数，改变页数；另外，为了防止一次就把后续的页面全部加载出来，导致加载缓慢，设置一次只加载一页，在ajax函数的末尾，也需要设置一下b的值：
最后程序编写完了，还有一些页面布局的优化就没有做了，因为以前很少有记录过，内容写的的有点混乱。最后附上完整的js代码：```window.onload = function(){var oUl = document.getElementById('ul');var aLi = oUl.getElementsByTagName('li');var iLen = aLi.var b =var iPage = 1;getList();//当鼠标往下翻滚到底时继续加载window.onscroll = function(){var _index = getShort();var oLi = aLi[_index];var scrollTop = document.documentElement.scrollTop || document.body.scrollTif(getTop(oLi) + oLi.offsetHeight & document.documentElement.clientHeight + scrollTop){//当最短的li底部出现在可视区时加载下一页if(b){//一次只能加载一页b=iPage++;getList()}}}function getList(){//初始化数据处理ajax('get','getPics.php','cpage='+iPage,function(data){//数据处理并生成文档结构函数//把获取到的字符串解析成对象；var data = JSON.parse(data);//根据数据生成文档结构for(var i=0;i//获取高度最短的li的索引var _index = getShort();var oDiv = document.createElement('div');//创建div节点var oImg = document.createElement('img');//创建img节点oImg.src = data[i].//把请求的数据中的preview值赋给img的src属性oImg.style.width = '240px';//设置img的宽度oImg.style.height = data[i].height*(240/data[i].width) + 'px';//设置img的高度oDiv.appendChild(oImg);//把img节点添加至div节点内var oP = document.createElement('p');//创建p节点oP.innerHTML = data[i].//把解析的对象数据中的title值作为节点的内容oDiv.appendChild(oP);//把p节点添加至div节点内aLi[_index].appendChild(oDiv);//把div节点添加至高度最短的li节点内/*图片加载延迟会造成高度误差，所以需要提前获得高度，防止偏差* */}b =})}//获取高度最短li的索引的函数function getShort(){var index = 0;var ih = aLi[index].offsetH//获得第0个li的高度for(var i=0;iif(aLi[i].offsetHeight & ih){index =ih = aLi[i].offsetH}}//返回高度最短li的索引；}function getTop(obj){var iTop = 0;while(obj){iTop += obj.offsetTobj = obj.offsetP}return iT}function ajax(method,url,data,success){var xhr =try{xhr = new XMLHttpRequest();}catch(e){xhr = new ActiveXObject('Microsoft.XMLHTTP');}if(method == 'get' && data){url += '?' +}xhr.open(method,url,true);if(method == 'get'){xhr.send();}else{xhr.send('content-type','application/x-www-form-urlencoded');}xhr.onreadystatechange = function(){if(xhr.readyState == 4){if(xhr.status == 200){//得到想要的数据success && success(xhr.responseText);//数据处理函数}else{console.log("出错了，Err:"+ xhr.status)}}}}}```
1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1.2不唐突的JS 1.2.1行为和结构分离
分为组织结构、样式、行为三部分。
任何存在与HTML页面内部的JS代码都是错误的。 1.3.1 JQuery包...
1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1.2不唐突的JS 1.2.1行为和结构分离
分为组织结构、样式、行为三部分。
任何存在与HTML页面内部的JS代码都是错误的。 1.3.1 JQuery包...
第一章 入门 基本功能：访问和操作 dom 元素，控制页面样式，对页面的事件处理，与ajax完美结合，有丰富的插件。 在jQuery库中，通过本身自带的方法获取页面元素的对象，称为jQuery对象 第二章 选择器 基本选择器是最简单的选择器也是最常用的选择器，它通过元素的i...
&a name='html'&HTML&/a& Doctype作用？标准模式与兼容模式各有什么区别?
（1）、&!DOCTYPE&声明位于位于HTML文档中的第一行，处于
标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文...
前端开发面试题 &a name='preface'&前言&/a& 只看问题点这里 看全部问题和答案点这里 本文由我收集总结了一些前端面试题，初学者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。万不可投机取巧，临时抱佛脚只求面试侥幸混过关是错误...
数字货币瀑布流 这几天，如果你身在一些区块链资产投资群中，可能会更经常的想起来一个成语：哀鸿遍野。虚拟货币资产的市场价格跳水严重，就连比特币的价格，也降到了14,000以下，更何况ETH, EOS等。比特币扩容的争论仍然没有结束，市场的跌跌不休，也不知道什么时候可以止跌反弹...
一样的落叶不一样的秋 一样的秋不一样的愁思 一样的愁思不一样的人 一样的人不一样的思念 一样的思念不一样的情 一样的情不一样的寄托 愿， 一样的寄托有一样的归宿。 夜伴秋露人随路， 无点亦无声， 但叫衣裳漉漉。
今天一个好友问俊哥：主要从事素食方面的，近期准备开始写文章，各个平台如何取名比较好？ 俊哥说：通过查询素食的搜索指数是838，可以得出每天有真人在搜索，所以你就注册素食相关的词就可以，也就是名字里面必须带有素食二字。 俊哥通过查询有一个词“素食主义”没有人注册，你可以去抢词...
近日，翼码旺财公众号“用户中心”功能栏上线了，不知道大家伙都发现没？ 集营销活动、数据查询、业务合作、业务展示于一身，方便快捷，让用户一目了然。 接下来，我们一起来看一下吧： &码上有活&可以看到翼码最新活动哦~，目前免费米POS试用活动还有最后两天，错失要等一年，没有...
【8】还是意外先来临 你还以为最大的城堡里住着最幸福的人呢，可他从镶钻的窗口艳慕地看着你，就像下一秒就要哭泣——贝龙说 &哥哥哥哥，我们的雪人被踩碎了！&戴针织帽的女孩一手搂着男孩一手指着地上一坨突出来的雪和雪上的脚印，&我们的宝宝好可怜，才出生一个小时就被踩扁了！& &乖...thinkPHP实现瀑布流的方法
转载 &更新时间：日 10:53:37 & 投稿：shichen2014
这篇文章主要介绍了thinkPHP实现瀑布流的方法,实例讲述了瀑布流插件的应用以及对应的HTML与Action代码,是非常实用的技巧,需要的朋友可以参考下
本文实例讲述了thinkPHP实现瀑布流的方法。分享给大家供大家参考。具体分析如下：
很多人都想做瀑布流的效果,这里告诉大家官网使用的方法,首先要下载瀑布流的插件jquery.masonry.min.js 地址：http://masonry.desandro.com/index.html里面包含的很多示例.
1. 页面初始化时,调用插件进行一次排版；
2. 当用户将滚动条拖到底部时,用ajax加载一次数据,并排版显示
3. 重复2,直到无数据
代码如下:&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&&
&html xmlns="http://www.w3.org/1999/xhtml"&&
&meta http-equiv="Content-Type" content="text/ charset=UTF-8"&&
&title&Insert title here&/title&&
&!--样式--&&
&style type="text/css"&&
body {margin:40 width:800 font-size:12 color:#666;}&
border: 1px solid #D4D4D4;&
margin: 0 10px 10px 0;&
padding: 10&
position:&
width: 200&
.loading-wrap{&
bottom: 50&
width: 100%;&
height: 52&
text-align:&
.loading {&
padding: 10px 10px 10px 52&
height: 32&
line-height: 28&
color: #FFF;&
font-size: 20&
border-radius: 5&
background: 10px center rgba(0,0,0,.7);&
border: 2px solid #D4D4D4;&
&!--样式--&&
&!--引入所需要的jquery和插件--&&
&script type="text/javascript" src="/test/public/Js/jquery-1.7.2.min.js"&&/script&&
&script type="text/javascript" src="/test/public/Js/jquery.masonry.min.js"&&/script&&
&!--引入所需要的jquery和插件--&&
&!--瀑布流--&&
&div id="container" class=" container"&&
&!--这里通过设置每个div不同的高度，来凸显布局的效果--&&
&volist name="height" id="vo"&&
&div class="item" style="height:{$vo}"&瀑布流下来了&/div&&
&input type="hidden" name="last_id" class="last_id" value="{$vo.id}"/&&
&/volist&&
&!--瀑布流--&&
&!--加载中--&&
&div id="loading" class="loading-wrap"&&
&span class="loading"&加载中，请稍后...&/span&&
&!--加载中--&&
&!--尾部--&&
&div class="footer"&&center&我是页脚&/center&&/div&&
&!--尾部--&&
&script type="text/javascript"&&
//用于转换unix时间戳&
function unix_to_datetime(unix)&&
var now = new Date(parseInt(unix) * 1000);&
return now.toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");&
$(function(){&
//页面初始化时执行瀑布流&
var $container = $('#container');&
$container.masonry({&
itemSelector : '.item',&
isAnimated: true&
//用户拖动滚动条，达到底部时ajax加载一次数据&
var loading = $("#loading").data("on", false);//通过给loading这个div增加属性on，来判断执行一次ajax请求&
$(window).scroll(function(){&
if(loading.data("on"))&
if($(document).scrollTop() & $(document).height()-$(window).height()-$('.footer').height()){//页面拖到底部了&
//加载更多数据&
loading.data("on", true).fadeIn(); //在这里将on设为true来阻止继续的ajax请求&
//获取最后一个id&
var lastid = $('.last_id:last').val();&
"getMore", //要跳转的页面&
{lastid:lastid},//传值&
function(data){&
//获取到了数据data,后面用JS将数据新增到页面上&
var getdata = data.&
var html = "";&
if($.isArray(getdata)){&
$.each(data.data,function(i,item) {&
html += "&div class=\"item\" style=\"height:"+data[i]+"\"&瀑布又流下来了&/div&";&
var $newElems = $(html).css({ opacity: 0 }).appendTo($container);&
$newElems.imagesLoaded(function(){&
$newElems.animate({ opacity: 1 });&
$container.masonry( 'appended', $newElems, true );&&
//一次请求完成，将on设为false，可以进行下一次的请求&
loading.data("on", false);&
loading.fadeOut();&
&/script&&
Action代码：
代码如下://初始化的数据&
public function lists(){&&
$data = D('Info')-&order('id DESC')-&limit(10)-&select();&
$this-&assign('data', $data);&
$this-&display();&
//获取一次请求的数据&
public function getMore(){&&
//获取最后一个id&
if(!emptyempty($_GET['lastid']))$map['id'] = array('lt', $_GET['lastid']);&&
$data = D('Info')-&where($map)-&order('id DESC')-&limit(10)-&select();&
$this-&ajaxReturn($data);&
注意:通过判断窗口是否滚动到页面底部来决定用ajax加载一次数据,如果不做处理,会一下子请求很多次,所以,要使用条件来限制.
这里使用的是往一个元素上赋值 $("#loading").data("on", true);,在请求期间判断是true则不继续请求,然后在页面请求完成后再赋值为false.
希望本文所述对大家的ThinkPHP框架程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具瀑布流后台实现的问题
[问题点数：20分]
本版专家分：21
结帖率 88.24%
CSDN今日推荐
本版专家分：966
本版专家分：105
本版专家分：21
结帖率 88.24%
本版专家分：21
结帖率 88.24%
本版专家分：5232
本版专家分：21
结帖率 88.24%
本版专家分：0
本版专家分：46
本版专家分：21
结帖率 88.24%
本版专家分：427
本版专家分：427
本版专家分：21
结帖率 88.24%
本版专家分：6
本版专家分：774
本版专家分：774
本版专家分：774
本版专家分：732
本版专家分：21
结帖率 88.24%
匿名用户不能发表回复！|
CSDN今日推荐&&&&&&&&&thinkphp绿色瀑布流门户网站源码PC+html5手机wap版 layui后台带批量采集
源码介绍：该源码是基于thinkphp3.2.3开发的绿色主题的门户网站，清新大气后台布局采用目前最流行的layui框架。后台功能包含会员分组、权限管理、数据库备份还原。该源码带电脑PC版和html5手机wap版，可全站生成静态，并且程序完
下载资源：226次
下载积分：0分
源码介绍：该源码是基于thinkphp3.2.3开发的绿色主题的门户网站，清新大气后台布局采用目前最流行的layui框架。后台功能包含会员分组、权限管理、数据库备份还原。该源码带电脑PC版和html5手机wap版，可全站生成静态，并且程序完整直接就能使用。该源码包括各种常用模块，比如音乐、视频、图片、文章，单页等。图片栏目采用瀑布流布局，自动加载内容。整站程序仅需要简单配置就能直接就能使用，秉承了thinkphp大道至简的理念，为您省去了很多不必要的麻烦。如需要购买或者体验后台功能，请直接联系客服 QQ：。
声明：转载请注明来源（）并保留原文链接：
用户名/邮箱
两周内免登录