本文目录一览：
- 1、dede织梦标签使用哪个可以调用图片瀑布流？
- 2、PHP瀑布流 不随机调取记录
- 3、自学前端，求推荐前端入门路线
- 4、php 多条件搜索及栏位数据操作后返回页面重置（搜索条件消失，回到数据展示的原始页面了）
- 5、前端开发需要学什么啊？
dede织梦标签使用哪个可以调用图片瀑布流？
编写调用代码
先默认显示15条，你也可以默认显示更多
{dede:arclist row="15" imgwidth='80' imgheight='60' titlelen='60' orderby="id" orderway="DESC"}
a href="[field:arcurl/]" class="list-item-box" title="[field:title/]"
dl class="list-item"
dt class="pic"[field:image/]/dt
dddiv class="news-info"
div class="news-title"[field:title/]/div
div class="news-info-bottom"
span[field:typename/]/spanspan class="news-date"[field:pubdate function="MyDate('m月d日 H:s',@me)"/]/span
/div
/div
/dd
/dl
/a
{/dede:arclist}
编写服务器端调用代码(一)获取数据
我们打开plus目录下的list.php文件，在require_once(dirname(__FILE__)."/../include/common.inc.php");这段代码的事后面写上以下代码
if(isset($_GET['ajax'])){
$typeid = isset($_GET['typeid']) ? intval($_GET['typeid']): 0;//传递过来的分类ID
$page = isset($_GET['page']) ? intval($_GET['page']): 0;//页码
$pagesize = isset($_GET['pagesize']) ? intval($_GET['pagesize']): 15;//每页多少条，也就是一次加载多少条数据
$start = $page0 ? ($page-1)*$pagesize : 0;//数据获取的起始位置。即limit条件的第一个参数。
$typesql = $typeid ? " WHERE typeid='$typeid" : '';//这个是用于首页实现瀑布流加载，因为首页加载数据是无需分类的，所以要加以判断，如果无需
$total_sql = "SELECT COUNT(id) as num FROM `#@__archives` $typesql ";
$temp = $dsql-GetOne($total_sql);
$total = 0;//数据总数
$load_num =0;
if(is_array($temp)){
$load_num= round(($temp['num']-15)/$pagesize);//要加载的次数,因为默认已经加载了
$total = $temp['num'];
}
$sql = "SELECT a.*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule,
t.namerule2,t.ispart, t.moresite,t.siteurl,t.sitepath
FROM `#@__archives` as a JOIN `#@__arctype` AS t ON a.typeid=t.id $typesql ORDER BY id DESC LIMIT $start,$pagesize";
$dsql-SetQuery($sql);
$dsql-Execute('list');
$statu = 0;//是否有数据，默认没有数据
$data = array();
}
编写服务器端调用代码(二)返回数据
我们在第三步的逻辑代码中加入以下代码
$index = 0;
while($row = $dsql-GetArray("list")){
$row['info'] = $row['info'] = $row['infos'] = cn_substr($row['description'],160);
$row['id'] = $row['id'];
$row['filename'] = $row['arcurl'] = GetFileUrl($row['id'],$row['typeid'],$row['senddate'],$row['title'],$row['ismake'],
$row['arcrank'],$row['namerule'],$row['typedir'],$row['money'],$row['filename'],$row['moresite'],$row['siteurl'],$row['sitepath']);
$row['typeurl'] = GetTypeUrl($row['typeid'],$row['typedir'],$row['isdefault'],$row['defaultname'],$row['ispart'],
$row['namerule2'],$row['moresite'],$row['siteurl'],$row['sitepath']);
if($row['litpic'] == '-' || $row['litpic'] == ''){
$row['litpic'] = $GLOBALS['cfg_cmspath'].'/images/defaultpic.gif';
}
if(!preg_match("#^http:\/\/#i", $row['litpic']) $GLOBALS['cfg_multi_site'] == 'Y'){
$row['litpic'] = $GLOBALS['cfg_mainsite'].$row['litpic'];
}
$row['picname'] = $row['litpic'];//缩略图
$row['stime'] = GetDateMK($row['pubdate']);
$row['typelink'] = "a href='".$row['typeurl']."'".$row['typename']."/a";//分类链
$row['fulltitle'] = $row['title'];//完整的标题
$row['title'] = cn_substr($row['title'], 60);//截取后的标题
$data[$index] = $row;
$index++;
}
if(!empty($data)){
$statu = 1;//有数据
}
$result =array('statu'=$statu,'list'=$data,'total'=$total,'load_num'=$load_num);
echo json_encode($result);//返回数据
exit();
编写js代码-配置信息
var loadConfig = {
url_api:'',//服务端处理路径
typeid:0,//分类
page:2,//开始页码
pagesize:15,//分页数
loading : 0,//加载状态,默认为未加载
}
编写js代码-滚动处理函数
function loadMoreApply(){
//如果未加载数据，就加载
if(loadConfig.loading == 0){
var typeid = loadConfig.typeid;
var page = loadConfig.page;
var pagesize = loadConfig.pagesize;
var url = loadConfig.url_api,data:{ajax:'pullload',typeid:typeid,page:page,pagesize:pagesize};
var sTop = document.body.scrollTop || document.documentElement.scrollTop, dHeight = $(document).height(), cHeight = document.documentElement.clientHeight;
//当滚动条高度加上浏览器可视区域高度大于等于文档高度减去浏览器可视区域高度时，就加载。文档高度减去浏览器可视区域高度，就是可以滚动条可以滚动的高度
if (sTop + cHeight = dHeight - cHeight) {
loadConfig.loading = 1;//将加载状态改为已加载
function ajax(url, data) {
$.ajax({url: url,data: data,async: false,type: 'GET',dataType: 'json',success: function(data) {
addContent(data);
}});
}
ajax(url,data);
}
}
}
编写js代码-html处理函数
function addContent (rs){
if(rs.statu== 1){
var data = rs.list;
var total = rs.total;
loadConfig.load_num = rs.load_num;//加载次数，按道理应该在第五步就已经获取到加载次数和数据总数的
var arr=[];
var length = data.length;
for(var i=0;ilength;i++){
arr.push('a href="'+data[i].arcurl+'" class="list-item-box" title="'+data[i].title+'"');
arr.push('dl class="list-item"');
arr.push('dt class="pic"img src="'+data[i].picname+'" width="80" height="60"//dt');
arr.push('dddiv class="news-info"');
arr.push('div class="news-title"'+data[i].title+'/div');
arr.push('div class="news-info-bottom"');
arr.push('span'+data[i].typename+'/spanspan class="news- date"'+data[i].pubdate+'/span');
arr.push('/div/dd/dl/a');
}
$('.list-zone').append(arr.join(''));
if(totalloadConfig.page*loadConfig.pagesize || loadConfig.page loadConfig.load_num){
//如果当前页码大于加载的总次数
window.removeEventListener('srcoll',loadMoreApply,false);
}
loadConfig.page++;递增页码
loadConfig.loading = 0;//加载完毕后，把加载状态改为0
}
}
编写js-绑定scroll事件
window.addEventListener('scroll', loadMoreApply, false);
测试结果
打开浏览器的开发工具，切换到网络选项，我们尝试着把滚动条拉到最底部，
你会在开发工具的面板中看到网页发送了一条get请求，我们看一下有没有获取到数据。注意，如果你的滚动条滚到了最底部，刷新页面时，网页就已经发一条加载请求。如果你觉得很别扭，你可以初始化滚动条的高度为0.
PHP瀑布流 不随机调取记录
/ 随机抽取9条记录以模拟实际情况
//$keys = array_rand($data, 10);把这句去掉
$json = array();
foreach($data as $key=$value)//这句改成这样
{
$json[] = $data[$key];
}
echo json_encode( $json );
其他的不改你再试试
自学前端，求推荐前端入门路线
第一阶段:
HTML CSS:HTML进阶、CSS进阶、div css布局、HTML css整站开发。
JavaScript基础:Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。
JS基本特效:常见特效、例如:tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。
JS高级特征:正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础。
JQuery:基础使用悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。
第二阶段:HTML5和移动Web开发
HTML5:HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas。
CSS3:CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。
Bootstrap:响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。
移动Web开发:跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、手机聚划算页面、手机滚屏。
第三阶段:HTTP服务和AJAX编程
WEB服务器基础:服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。
PHP基础:PHP基础语法、使用PHP处理简单的GET或者POST请求。
AJAX上篇:Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用。
AJAX下篇:JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。
第四阶段:面向对象进阶
面向对象终极篇:从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器。
面向对象三大特征:继承性、多态性、封装性、接口。
设计模式:面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。
第五阶段:封装一个属于自己的框架
框架封装基础:事件流、冒泡、捕获、事件对象、事件框架、选择框架。
框架封装中级:运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。
框架封装高级和补充:JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。
第六阶段:模块化组件开发
面向组件编程:面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。
面向模块编程:AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。
第七阶段:主流的流行框架
Web开发工作流:GIT/SVN、Yeoman脚手架、NPMer依赖管理工具、Grunt/Gulp/Webpack。
MVC/MVVM/MVW框架:Angular.js、Backbone.js、Knockout/Ember。
常用库:React.js、Vue.js、Zepto.js。
第八阶段:HTML5原生移动应用开发
Cordova:WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的关系、开发环境搭建、Cordova实战(创建项目，配置，编译，调试，部署发布)。
Ionic:Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果(下拉刷新，上拉加载，侧滑导航，选项卡)。
React Native:React Native简介、React Native环境配置、创建项目，配置，编译，调试，部署发布、原生模块和UI组件、原生常用API。
HTML5 :HTML5 中国产业联盟、HTML5 Plus Runtime环境、HBuilder开发工具、MUI框架、H5 开发和部署。
第九阶段: Node.js全栈开发:
快速入门:Node.js发展、生态圈、Io.js、Linux/Windows/OS X环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试。
核心模块和对象:全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径操作。
希望对你有帮助！
php 多条件搜索及栏位数据操作后返回页面重置（搜索条件消失，回到数据展示的原始页面了）
一种，对学员操作部分，可以使用弹窗或者弹层，配合ajax实现，推荐使用 layer 这个组件，具体自行百度。这样操作修改不会刷新当前已查询好页面。
一种，查询的时候，用cookie或者session存储请求条件的内容，再次进入页面时，先判断session或cookie有没内容，优先使用。什么时候记忆什么时候删除，这个要想好在哪里控制。
一种，我自已碰到的一个瀑布流控制，是使用localStorage方式，在切换时记下div的html，这个只局限在html5的浏览器。
前端开发需要学什么啊？
需要学习如下内容：
1、HTML语言
掌握HTML是网页的核心，是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。因此，它是网络上应用最为广泛的语言，也是构成网页文档的主要语言，学好HTML是成为Web开发人员的基本条件。
HTML是一种标记语言，能够实现Web页面并在浏览器中显示。HTML5作为HTML的最新版本，引入了多项新技术，大大增强了对于应用的支持能力，使得Web技术不再局限于呈现网页内容。
随着CSS、JavaScript、Flash等技术的发展，Web对于应用的处理能力逐渐增强，用户浏览网页的体验已经有了较大的改善。不过HTML5中的几项新技术实现了质的突破，使得Web技术首次被认为能够接近于本地原生应用技术，开发Web应用真正成为开发者的一个选择。
HTML5可以使开发者的工作大大简化，理论上单次开发就可以在不同平台借助浏览器运行，降低开发的成本，这也是产业界普遍认为HTML5技术的主要优点之一。AppMobi、摩托罗拉、Sencha、Appcelerator等公司均已推出了较为成熟的开发工具，支持HTML5应用的发展。
2、CSS
学好CSS是网页外观的重要一点，CSS可以帮助把网页外观做得更加美观。
3、JavaScript
学习JavaScript的基本语法，以及如何使用JavaScript编程将会提高开发人员的个人技能。
4、操作系统
了解Unix和Linux的基本知识，对于开发人员有益无害。
5、网络服务器
了解Web服务器，包括对Apache的基本配置，htaccess配置技巧的掌握等。
扩展资料
常见前端开发工程师职位职责要求：
（1）使用Div+css并结合Javascript负责产品的前端开发和页面制作。
（2）熟悉W3C标准和各主流浏览器在前端开发中的差异，能熟练运用DIV+CSS，提供针对不同浏览器的前端页面解决方案。移动HTML5的性能和其他优化，为用户呈现最好的界面交互体验和最好的性能。
（3）负责相关产品的需求以及前端程序的实现，提供合理的前端架构。改进和优化开发工具、开发流程、和开发框架。
（4）与产品、后台开发人员保持良好沟通，能快速理解、消化各方需求，并落实为具体的开发工作 ；能独立完成功能页面的设计与代码编写，配合产品团队完成功能页面的需求调研和分析。
（5）了解服务器端的相关工作，在交互体验、产品设计等方面有自己的见解。
