1119597068
1119597068

HTml+js+css 实现浏览器图片的瀑布流

可以将照片文件放入images里实现功能，也可以通过遍历字典或者函数递归的方法将所有图片导入做成网页版的相册！
实现文件结构：
HTml+js+css 实现浏览器图片的瀑布流_第1张图片
htmlL部分:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="css/style.css">
<body>
<div id="main">
    <div class="box">
        <div class="pic"><img src="images/1.jpg" alt=""></div>
    </div>
    <div class="box">
        <div class="pic"><img src="images/2.jpg" alt=""></div>
    </div>
    <div class="box">
        <div class="pic"><img src="images/3.jpg" alt=""></div>
    </div>
    <div class="box">
        <div class="pic"><img src="images/4.jpg" alt=""></div>
    </div>
    <div class="box">
        <div class="pic"><img src="images/5.jpg" alt=""></div>
    </div>
    <div class="box">
        <div class="pic"><img src="images/6.jpg" alt=""></div>
    </div>
    <div class="box">
        <div class="pic"><img src="images/7.jpg" alt=""></div>
    </div>
    <div class="box">
        <div class="pic"><img src="images/8.jpg" alt=""></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/9.jpg" alt=""></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/10.jpg" alt=""></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/11.jpg" alt=""></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/12.jpg" alt=""></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/13.jpg" alt=""></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/14.jpg" alt=""></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/15.jpg" alt=""></div>
    </div>
    <div class="box">
        <div class="pic"><img src="images/16.jpg" alt=""></div>
    </div>
    <div class="box">
        <div class="pic"><img src="images/17.jpg" alt=""></div>
    </div>
    <div class="box">
        <div class="pic"><img src="images/18.jpg" alt=""></div>
    </div>
    <div class="box">
        <div class="pic"><img src="images/19.jpg" alt=""></div>
    </div>
    <div class="box">
        <div class="pic"><img src="images/20.jpg" alt=""></div>
    </div>
    <div class="box">
</div>
<script src="js/waterfall.js"></script>
</body>
</html>

JS模块代码：

//1》写入waterfall函数，为了实现2次调用， a)刷新页面加载一次 b)拖动滚动条的时候加载一次
//2》拖动滚动条的时候，开始加载图片====》事件
window.onload = function(){

    waterfall("main","box");

    var dataImg = {

        arr:[
            {"src":"1.jpg"},
            {"src":"2.jpg"},
            {"src":"3.jpg"},
            {"src":"4.jpg"},
            {"src":"5.jpg"},
            {"src":"6.jpg"}
        ]

    }

    window.onscroll = function(){

        if(scrollTop()){
            for(var i=0;i<dataImg.arr.length;i++){
                var main = document.getElementById("main");

                var oDiv = document.createElement("div");
                oDiv.className = "box";

                var oPic = document.createElement("div");
                oPic.className = "pic";

                var imgs = document.createElement("img");
                imgs.src = "images/"+dataImg.arr[i].src+"";

                main.appendChild(oDiv);
                oDiv.appendChild(oPic);
                oPic.appendChild(imgs);
            }
        }

        waterfall("main","box");

    }
}
function scrollTop(){

    var oBox = getClass("box");
    var oBoxlast = oBox[oBox.length-1];
    var top = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.body.clientHeight || document.documentElement.clientHeight;

    if(oBoxlast.offsetHeight/2+oBoxlast.offsetTop < top+height){
          return true;
    }else{
          return false;
    }
}

function waterfall(parent,box){

    var oParent = document.getElementById(parent);
    //获取到父节点
    var oBox = getClass(box);
    //获取到box子节点

    var width = document.documentElement.clientWidth || document.body.clientWidth;
    //可视区域的宽度值

    var oBoxWidth = oBox[0].offsetWidth;
    //获取图片的宽度

    var num = Math.floor(width/oBoxWidth);
    //获取可视区域，一行能放入几张图片

    oParent.style.width = num*oBoxWidth+"px";
    //设置父节点的宽度

    var hrr= [];
    for(var i=0;i<oBox.length;i++){

        if(i<num){

            hrr.push(oBox[i].offsetHeight);

        }else{


            var min=Math.min.apply(null,hrr);
            var index = inArray(hrr,min);

            oBox[i].style.position = "absolute";
            oBox[i].style.left =  index*oBoxWidth+"px";
            //设置图片摆放left值  = 最小高度的下标*图片的宽度
            oBox[i].style.top = min+"px";
            //设置图片摆放的top值  = 最小值（上面）图片的高度;

            hrr[index] += oBox[i].offsetHeight;

        }


    }

    console.log(hrr);

}

function inArray(hrr,min){

    for(var i=0;i<hrr.length;i++){

        if(hrr[i] == min){

            return i;
        }
    }
}


function getClass(box){  //获取class名称节点的函数

    //1》把页面上所有的节点获取到
    //2》循环遍历所有节点，进行条件判断，
    //3》符合要求的节点放入到数组中

    var doms = document.getElementsByTagName("*");
    var reg = new RegExp("\\b"+box+"\\b");
    var arr = [];
    for(var i=0;i<doms.length;i++){

        if( reg.test( doms[i].className  ) ){

            arr.push(doms[i]);

        }

    }

    return arr;
}

CSS模块代码：

*{margin:0;padding:0}

#main{
    margin:15px auto;
    position: relative;
}
.box{
    padding:15px 0 0 15px;
    float:left;
}
.pic{
    padding:15px;
    border:1px solid #ccc;
    box-shadow: 0 0 5px #ccc;
    border-radius: 5%;
}
.pic img{
    width:168px;
}

加载实现效果

你可能感兴趣的:(前端JS)

  • Netty服务器结合WebSocke协议监听和接收数据 beiback 服务器问题Java服务器运维netty
    目录1.pom依赖2.配置属性3.创建netty服务器4.建立监听和响应5.创建启动器6.前端static下页面7.前端js8.注意异常问题9.创建netty服务器--使用守护线程1.pom依赖io.nettynetty-all4.1.86.Final2.配置属性application.properties#启动端口server.port=8088server.servlet.context-pa
  • 前端js控制点击切换效果且刷新浏览器不会重置 spring39 前端javascript
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、布局的部分代码和样式二、使用js来控制点击时颜色变化，点击哪一个图标，哪一个图标就应该变橙色且带有下边框1.分析流程及思路2.为什么要有刷新浏览器闪亮图标不变的需求？3.依靠sessionStroage的浏览器未关闭，不会消失的特性来存储相关数据4.整体实现前言原生js实现点击切换样式效果，且刷新浏览器不会丢失当前数据
  • SpringBoot解决前端js处理大数字丢失精度问题Long转String shun35 面试必学前端springbootjavascript
    一、Jackson对Long类型的处理导致精度丢失的问题表的某一个字段的类型是BIGINT，对应的Java类的属性的类型就是Long。当这个字段的值由后端返回给前端网页时，发现了精度丢失的问题。比如后端返回的值是588085469986509185，到了前端是588085469986509200，后面的几位数变成了0，精度丢失了二、原因JavaScript中数字的精度是有限的，BIGINT类型的的
  • smart-backend-standard-guide前端代码规范 ʚ梅梅ɞ vue前端javascriptvue.js
    前端JS项目开发规范规范的目的是为了编写高质量的代码，让你的团队成员每天得心情都是愉悦的，大家在一起是快乐的。引自《阿里规约》的开头片段：----现代软件架构的复杂性需要协同开发完成，如何高效地协同呢？无规矩不成方圆，无规范难以协同，比如，制订交通法规表面上是要限制行车权，实际上是保障公众的人身安全，试想如果没有限速，没有红绿灯，谁还敢上路行驶。对软件来说，适当的规范和标准绝不是消灭代码内容的创造
  • 前端JS调用浏览器打印服务打印doc文件 马coder 前端htmlcssjavascript
    头两天客户提了一个需求，原来某个业务流程的doc文档预览网页弹窗上，要添加一个一键打印的按钮，时间没做限制，但是要求尽量打印出来的效果和预览弹窗上的尽可能的一致。由于文档预览窗口的效果，是用JS和CSS模拟doc文本显示效果做的，本质上还是HTML那套。一开始想的直接将HTML元素给print打印出来，但是一看打印窗口的效果，简直不忍直视，要是一点点的改，麻烦不说，后期要是还有别的文档要打印，那岂
  • 处理iOS double精度丢失问题 夏日冰霜
    有些时候，后台返回类型为double类型的数值，如(double)558.93，那前端json解析后，会有精度丢失的问题，解析的结果为558.9299999999999那如果需要前端把丢失的精度找回来，需要怎么做呢。我这里自己封装了一个方法，大家可以直接拿到项目中调用。+(NSString*)reviseString:(NSString*)str{//直接传入精度丢失有问题的Double类型dou
  • @Validated注解自定义参数校验 chaojunma javaspringbootValidated校验
    个人博客纯净版@Validated注解自定义参数校验|代码搬运工参数校验是我们程序开发中必不可少的过程。用户在前端页面上填写表单时，前端js程序会校验参数的合法性，当数据到了后端，为了防止恶意操作，保持程序的健壮性，后端同样需要对数据进行校验。后端参数校验最简单的做法是直接在业务方法里面进行判断，当判断成功之后再继续往下执行。但这样带给我们的是代码的耦合，冗余。当我们多个地方需要校验时，我们就需要
  • Node.js的接口跨域的问题与解决方案，使用 CORS中间件解决跨域问题 noahsark747 中间件node.js前端
    cors简介CORS是由一系列HTTP响应头组成，由这些HTTP响应头决定浏览器是否阻止前端JS代码跨域获取资源。浏览器的同源安全策略会阻止网页跨域获取资源，但如果接口服务器配置了CORS相关的HTTP响应头，就可以接触浏览器端的跨域访问限制。**注意：**CORS主要在服务器端进行配置，浏览器无需做额外的配置，即可请求开启了CORS的接口。CORS在浏览器中有兼容性，ie10+、chrome4+
  • 前端JS学习(三) ALEX朱先生
    一、时间函数|定时器1.重复执行定时器方法名:setInterval()作用:每隔多长时间执行一次函数,重复执行参考语法:setInterval(function(){},时间)2.延迟执行定时器方法名:setTimeOut()作用:延迟多长时间以后执行一次参考语法:setTime(function(){...要执行的代码..},时间)时间:毫秒数2.1流程方法1.获取div节点2.添加一个点击事
  • 使用百度Echarts制作力导向图 weixin_30780649 javascriptjson测试ViewUI
    最近项目需求制作一个力导向图来展示企业的画像等关系信息，故想到了百度Echarts的关系图，在这使用Echarts3.0版本来实现。先上效果图，再看代吗哎，本来想整个工程扔出来，发现好像没地方上传附件，所以就先附上部分重要代码，节点的参数大部分封装在后台代码中，前端js只负责配置参数以及调用后台获取对应的节点以及关系线。你也可以所有节点和线的数据都在js中构造也是可以的。//C#代码usingSy
  • ajax跨域请求接口介绍及解决方案 唐人不自醉
    在前端开发过程中，将常出现前端代码和后台服务不在一个服务器的情况，这时候前端js代码调用后台接口，会出现跨域问题。1、这里的域是通过URL的头部来识别的。浏览器并不会去尝试判断相同的ip地址对应着两个域或者两个域是否在同一个ip上。URL的头部指window.location.protocol+window.location.host，也可以理解为“Domains,protocolsandport
  • 前端js流式获取接口数据 欧偶藕 javascript前端开发语言
    consturl='url'asyncfunctiongetdata(content){constresp=awaitfetch(url,{method:'post',headers:{'Content-Type':'application/json',}body:json.stringify({content})})//获取流读取器constreader=resp.body.getReader(
  • 小猿圈分享2019年前端JavaScript面试题（一） 小猿圈IT教育
    互联网发展到了今天，很多同学都开始学习编程，java、python、linux、html5前端都是现在比较火爆的行业之一，而学习html5前端的同学也是最多的，简单、易上手是它的最主要特点，但是在面试中，就由很多朋友会因为html5中的js出错，接下来的几天小猿圈前端讲师就会为你分享几个前端js面试题，希望对你的面试有一定的帮助。JavaScript的ES2015改变了一切。ES2015规范带来了
  • 前端JS实现简易一键复制黏贴函数(可复制换行) Xiaop
    废话不多说,直接上代码,有问题下面或者私信讨论哈定义functioncopy(copyContent){//1.创建并添加一个输入框元素(最后会销毁)consttextareaEle=document.createElement("textarea");document.body.appendChild(textareaEle);//2.将需要复制的文本传入输入框,并调用select方法,选中输入
  • VUE 栗子树下_
    什么是VUE如何使用VUEMVVM绑定原理指令一.什么是VUE:什么是:(1).第三方开发的——下载(2).基于MVVM设计模式的?(3).渐进式的——可以逐步在项目中使用vue的部分继承。而不要求必须把整个项目都改为vue。(4).纯前端js——只要有浏览器就可以运行，和后端nodejs无关。(5).框架——自动化，避免大量重复劳动为什么:简化开发，避免重复劳动！何时:今后，凡是以数据操作(增删
  • Vue基础语法篇 Gao_xu_sheng vue.js前端javascript
    1.1web前端三大主流框架web前端三大主流框架都是Angular、React、Vue。1.2AngularAngularJS诞生于2009年，由MiskoHevery等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。Angular1.3R
  • JS atob btoa方法处理base64数据后转Blob类型实现文字转语音.mp3文件 星云- 前端javascriptgoogletalk前端html5html
    前端js+googleText-to-SpeechAPI实现文字转mp3文件使用由Google的AI技术提供支持的API将文字转换为自然而逼真的语音。地址GoogleText-to-Speech官网Tip：官网可以在线体验文字转语音，切换语言、男女声、语音速度等功能（详情见下图）访问需要fq官网API详情截图查阅google开发者文档发现Text-to-SpeechAPI返回的是base64编码的
  • Upload靶场通关教程（旧版20关） I_WORM php安全upload靶场通关
    文件上传类型：前端验证：1MIME类型验证：2黑名单验证：3~10，19大小写绕过、空格绕过、解析后缀+数字绕过、点绕过、/绕过、::$DATA绕过白名单验证：11~18，20%00截断、二次渲染、文件包含、解析漏洞、逻辑漏洞第一关先上传一句话木马文件判断对方的验证方式，发现是前端JS验证方法1:关闭火狐浏览器JS渲染在浏览器地址栏中输入about:config；关闭JavaScript_enab
  • 前端js华为云obs上传下载文件与进度条的设置 sweet202005 前端javascript华为云
    前端js华为云obs上传下载文件与进度条的设置首先下载OBSBrowserJSSDK安装包用git将代码拉到本地gitclonehttps://github.com/huaweicloud/huaweicloud-sdk-browserjs-obs.git下载到本地安装依赖npminstall安装依赖完成后可以看到其中包含examples文件夹（示例代码），dist文件夹（SDK库文件）。在所需要
  • 前端js以application/octet-stream方式上传文件 员宇宙 java前端
    今天又学会了一种上传文件的文件流方法。本人后端采用了CXF框架实现的api层packagecom.inspur.gs.tax.tbs.utils;importorg.glassfish.jersey.media.multipart.FormDataParam;importjavax.activation.DataHandler;importjavax.jws.WebParam;importjava
  • 前端JSON对象根据key获取多层数据结构里的对应map qq_22905801 前端json
    数据结构示例：varjsonString='[{"id":2,"label":"AAAA","children":[{"id":3,"label":"AAAA_1"}]},{"id":24,"label":"A_01_children","children":[{"id":28,"label":"7657"}]},{"id":19,"label":"B001"}]';varjsonString=J
  • 前端js实现密码块的显示与隐藏（按钮） 10Eugene 前端JavaScript前端js密码
    最近老师上课有讲到这个问题，写了就顺便就发出来吧js部分window.onload=function(){varoPass=document.getElementById('pass');varoBtn=document.getElementById('btn');vara=true;oBtn.onclick=function(){if(a){oPass.type='text';a=false;o
  • 35、WEB攻防——通用漏洞&XSS跨站&反射&存储&DOM&盲打&劫持 PT_silver 小迪安全前端xss
    文章目录XSS产生于前端的漏洞，常产生于：XSS分类：反射型（非持久型）存储型（持久型），攻击代码被写入数据库中。常见于：写日志、留言、评论的地方DOM型DOM型XSS与反射型XSS、存储型XSS的最大区别在于：DOM型XSS前端的数据是传输给前端JS代码进行处理，而反射型XSS、存储型XSS是后端PHP代码对前端数据进行处理。mXSS（突变型XSS）UXSS（通用型XSS）FlashXSSUTF
  • 前端JS实现图片质量压缩 百里狂生 HTMLjavascriptjsimagehtmlcanvasblob
    前端JS实现图片质量压缩用户在选择图片文件进行上传的时候是不会考虑文件的大小的，比如场景：某用户只是想更换一下自己的用户头像，于是用自己的手机拍了一张照片，上传到应用中更换用户头像，然而现在的手机拍照功能保存的图片大多都超过3MB，而头像只是一个占用空间很小的显示区域，所以上传一个很大的图片会浪费资源和消耗不必要的性能目的：降低流量的消耗降低http请求性能消耗降低服务器压力原文件：压缩后的文件：
  • 文件上传漏洞小结 想拿 0day 的脚步小子 #文件上传网络安全web安全安全
    首先进行操作系统判断改url大小写看能否正常访问windows（正常访问）无视大小写linux（不能访问）看大小写一．前端js绕过Bp看有没有包二.后端绕过MIME-Type验证查http包的Content-Type字段中的值来判断上传文件是否合法的小技巧，可以先成功上传一个案例，观察服务器允许的mime的类型，然后再抓包修改测试利用Burpsuite工具截断HTTP请求，在Repeater重放修
  • 关于JAVA中的MVC结果，Controller方法返回字符串到前端js出现乱码问题 和Ye哥学架构 前后端交换乱码jsjavamvc乱码前端
    解决spring-mvc@responseBody注解返回json乱码问题收藏刘志成发表于3年前阅读26213收藏5点赞11评论8【粉丝福利】-《web前端基础到实战系列课程》免费在线直播教学>>>在使用spring-mvc的mvc的时候既享受它带来的便捷，又头痛它的一些问题，比如经典的中文乱码问题。现在是用json作为客户端和服务端的数据交换格式貌似很流行，但是在springmvc中有时候会因为
  • 文件上传笔记整理 I_WORM 笔记文件上传安全php
    文件上传web渗透的核心，内网渗透的基础通过上传webshell文件到对方的服务器来获得对方服务器的控制权成功条件文件成功上传到对方的服务器（躲过杀软）知道文件上传的具体路径上传的文件可以执行成功文件上传的流程前端JS对上传文件进行检测（文件类型）服务器端MIME类型（文件类型）检测服务器端目录路径检测服务器端文件扩展名检测服务器端文件内容检测常用的一句话木马phpaspaspx文件上传的几种情况
  • Node.js 使用 cors 中间件解决跨域问题 果冻~ node.js中间件
    CORS跨域资源共享什么是CORScors是Express的一个第三方中间件。通过安装和配置cors中间件，可以很方便地解决跨域问题。CORS（Cross-OriginResourceSharing，跨域资源共享）由一系列HTTP响应头组成，这些HTTP响应头决定浏览器是否阻止前端JS代码跨域获取资源。浏览器的同源安全策略默认会阻止网页“跨域”获取资源。但如果接口服务器配置了CORS相关的HTTP
  • Java毕业设计-基于ssm的网上求职招聘管理系统-第85期 从戎程序员 java课程设计求职招聘springboot毕业设计
    获取源码资料，请移步从戎源码网：从戎源码网_专业的计算机毕业设计网站项目介绍基于ssm的网上求职招聘管理系统：前端jsp、jquery，后端springmvc、spring、mybatis，角色分为管理员、招聘人员、用户；集成职位发布，查看简历，简历编辑，在线投递等功能于一体的系统。功能介绍管理员系统管理：管理员信息的增删改查，密码修改人员信息管理：招聘人员的增删改查，应聘人员信息的列表查询，删除
  • 009-基础入门-算法逆向&散列对称非对称&JS源码逆向&AES&DES&RSA&SHA wusuowei2986 算法javascript开发语言web安全
    009-基础入门-算法逆向&散列对称非对称&JS源码逆向&AES&DES&RSA&SHA演示案例：➢算法加密-概念&分类&类型➢加密解密-识别特征&解密条件➢解密实例-密文存储&数据传输安全测试中：密文-有源码直接看源码分析算法（后端必须要有源码才能彻底知道）密文-没有源码1、猜识别2、看前端JS（加密逻辑是不是在前端）#算法加密-概念&分类&类型1.单向散列加密-MD5单向散列加密算法的优点有(
  • 多线程编程之卫生间 周凡杨 java并发卫生间线程厕所
    如大家所知，火车上车厢的卫生间很小，每次只能容纳一个人，一个车厢只有一个卫生间，这个卫生间会被多个人同时使用，在实际使用时，当一个人进入卫生间时则会把卫生间锁上，等出来时打开门，下一个人进去把门锁上，如果有一个人在卫生间内部则别人的人发现门是锁的则只能在外面等待。问题分析：首先问题中有两个实体，一个是人，一个是厕所，所以设计程序时就可以设计两个类。人是多数的，厕所只有一个（暂且模拟的是一个车厢）。
  • How to Install GUI to Centos Minimal sunjing linuxInstallDesktopGUI
    http://www.namhuy.net/475/how-to-install-gui-to-centos-minimal.html   I have centos 6.3 minimal running as web server. I’m looking to install gui to my server to vnc to my server. You can insta
  • Shell 函数 daizj shell函数
    Shell 函数 linux shell 可以用户定义函数，然后在shell脚本中可以随便调用。 shell中函数的定义格式如下： [function] funname [()]{ action; [return int;] } 说明： 1、可以带function fun() 定义，也可以直接fun() 定义,不带任何参数。 2、参数返回
  • Linux服务器新手操作之一 周凡杨 Linux 简单 操作
    1.whoami      当一个用户登录Linux系统之后，也许他想知道自己是发哪个用户登录的。      此时可以使用whoami命令。      [ecuser@HA5-DZ05 ~]$ whoami       e
  • 浅谈Socket通信（一） 朱辉辉33 socket
    在java中ServerSocket用于服务器端，用来监听端口。通过服务器监听，客户端发送请求，双方建立链接后才能通信。当服务器和客户端建立链接后，两边都会产生一个Socket实例，我们可以通过操作Socket来建立通信。    首先我建立一个ServerSocket对象。当然要导入java.net.ServerSocket包    ServerSock
  • 关于框架的简单认识 西蜀石兰 框架
    入职两个月多，依然是一个不会写代码的小白，每天的工作就是看代码，写wiki。 前端接触CSS、HTML、JS等语言，一直在用的CS模型，自然免不了数据库的链接及使用，真心涉及框架，项目中用到的BootStrap算一个吧，哦，JQuery只能算半个框架吧，我更觉得它是另外一种语言。 后台一直是纯Java代码，涉及的框架是Quzrtz和log4j。 都说学前端的要知道三大框架，目前node.
  • You have an error in your SQL syntax; check the manual that corresponds to your 林鹤霄
    You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'option,changed_ids  ) values('0ac91f167f754c8cbac00e9e3dc372
  • MySQL5.6的my.ini配置 aigo mysql
    注意：以下配置的服务器硬件是：8核16G内存    [client]   port=3306   [mysql]   default-character-set=utf8     [mysqld]   port=3306   basedir=D:/mysql-5.6.21-win
  • mysql 全文模糊查找 便捷解决方案 alxw4616 mysql
    mysql 全文模糊查找 便捷解决方案 2013/6/14 by 半仙 [email protected] 目的: 项目需求实现模糊查找. 原则: 查询不能超过 1秒. 问题: 目标表中有超过1千万条记录. 使用like '%str%' 进行模糊查询无法达到性能需求. 解决方案: 使用mysql全文索引. 1.全文索引 : MySQL支持全文索引和搜索功能。MySQL中的全文索
  • 自定义数据结构 链表(单项 ,双向,环形) 百合不是茶 单项链表双向链表
         链表与动态数组的实现方式差不多,    数组适合快速删除某个元素    链表则可以快速的保存数组并且可以是不连续的       单项链表;数据从第一个指向最后一个   实现代码:        //定义动态链表 clas
  • threadLocal实例 bijian1013 javathreadjava多线程threadLocal
    实例1： package com.bijian.thread; public class MyThread extends Thread { private static ThreadLocal tl = new ThreadLocal() { protected synchronized Object initialValue() { return new Inte
  • activemq安全设置—设置admin的用户名和密码 bijian1013 javaactivemq
            ActiveMQ使用的是jetty服务器, 打开conf/jetty.xml文件，找到 <bean id="adminSecurityConstraint" class="org.eclipse.jetty.util.security.Constraint"> <p
  • 【Java范型一】Java范型详解之范型集合和自定义范型类 bit1129 java
    本文详细介绍Java的范型，写一篇关于范型的博客原因有两个，前几天要写个范型方法(返回值根据传入的类型而定)，竟然想了半天，最后还是从网上找了个范型方法的写法；再者，前一段时间在看Gson, Gson这个JSON包的精华就在于对范型的优雅简单的处理，看它的源代码就比较迷糊，只其然不知其所以然。所以，还是花点时间系统的整理总结下范型吧。   范型内容 范型集合类 范型类
  • 【HBase十二】HFile存储的是一个列族的数据 bit1129 hbase
    在HBase中，每个HFile存储的是一个表中一个列族的数据，也就是说，当一个表中有多个列簇时，针对每个列簇插入数据，最后产生的数据是多个HFile，每个对应一个列族，通过如下操作验证   1. 建立一个有两个列族的表   create 'members','colfam1','colfam2'   2. 在members表中的colfam1中插入50*5
  • Nginx 官方一个配置实例 ronin47 nginx 配置实例
    user www www; worker_processes 5; error_log logs/error.log; pid logs/nginx.pid; worker_rlimit_nofile 8192; events { worker_connections 4096;} http { include conf/mim
  • java-15.输入一颗二元查找树，将该树转换为它的镜像， 即在转换后的二元查找树中，左子树的结点都大于右子树的结点。 用递归和循环 bylijinnan java
    //use recursion public static void mirrorHelp1(Node node){ if(node==null)return; swapChild(node); mirrorHelp1(node.getLeft()); mirrorHelp1(node.getRight()); } //use no recursion bu
  • 返回null还是empty bylijinnan javaapachespring编程
    第一个问题，函数是应当返回null还是长度为0的数组（或集合）？ 第二个问题，函数输入参数不当时，是异常还是返回null？ 先看第一个问题 有两个约定我觉得应当遵守： 1.返回零长度的数组或集合而不是null（详见《Effective Java》） 理由就是，如果返回empty，就可以少了很多not-null判断： List<Person> list
  • [科技与项目]工作流厂商的战略机遇期 comsci 工作流
          在新的战略平衡形成之前，这里有一个短暂的战略机遇期，只有大概最短6年，最长14年的时间，这段时间就好像我们森林里面的小动物，在秋天中，必须抓紧一切时间存储坚果一样，否则无法熬过漫长的冬季。。。。         在微软，甲骨文，谷歌，IBM,SONY
  • 过度设计-举例 cuityang 过度设计
    过度设计，需要更多设计时间和测试成本，如无必要，还是尽量简洁一些好。 未来的事情，比如 访问量，比如数据库的容量，比如是否需要改成分布式  都是无法预料的 再举一个例子，对闰年的判断逻辑： 　　1、 if($Year%4==0) return True; else return Fasle; 　　2、if (   ($Year%4==0  &am
  • java进阶，《Java性能优化权威指南》试读 darkblue086 java性能优化
    记得当年随意读了微软出版社的.NET 2.0应用程序调试，才发现调试器如此强大，应用程序开发调试其实真的简单了很多，不仅仅是因为里面介绍了很多调试器工具的使用，更是因为里面寻找问题并重现问题的思想让我震撼，时隔多年，Java已经如日中天，成为许多大型企业应用的首选，而今天，这本《Java性能优化权威指南》让我再次找到了这种感觉，从不经意的开发过程让我刮目相看，原来性能调优不是简单地看看热点在哪里，
  • 网络学习笔记初识OSI七层模型与TCP协议 dcj3sjt126com 学习笔记
      协议：在计算机网络中通信各方面所达成的、共同遵守和执行的一系列约定 　　计算机网络的体系结构：计算机网络的层次结构和各层协议的集合。 　　两类服务： 　　面向连接的服务通信双方在通信之前先建立某种状态，并在通信过程中维持这种状态的变化，同时为服务对象预先分配一定的资源。这种服务叫做面向连接的服务。 　　面向无连接的服务通信双方在通信前后不建立和维持状态，不为服务对象
  • mac中用命令行运行mysql dcj3sjt126com mysqllinuxmac
    参考这篇博客：http://www.cnblogs.com/macro-cheng/archive/2011/10/25/mysql-001.html  感觉workbench不好用（有点先入为主了）。 1，安装mysql 在mysql的官方网站下载 mysql 5.5.23 http://www.mysql.com/downloads/mysql/，根据我的机器的配置情况选择了64
  • MongDB查询（1）——基本查询[五] eksliang mongodbmongodb 查询mongodb find
    MongDB查询 转载请出自出处：http://eksliang.iteye.com/blog/2174452 一、find简介 MongoDB中使用find来进行查询。 API:如下 function ( query , fields , limit , skip, batchSize, options ){.....}  参数含义： query:查询参数 fie
  • base64，加密解密 经融加密，对接 y806839048 经融加密对接
    String data0 = new String(Base64.encode(bo.getPaymentResult().getBytes(("GBK")))); String data1 = new String(Base64.decode(data0.toCharArray()),"GBK"); // 注意编码格式，注意用于加密，解密的要是同
  • JavaWeb之JSP概述 ihuning javaweb
      什么是JSP？为什么使用JSP？ JSP表示Java Server Page，即嵌有Java代码的HTML页面。使用JSP是因为在HTML中嵌入Java代码比在Java代码中拼接字符串更容易、更方便和更高效。   JSP起源    在很多动态网页中，绝大部分内容都是固定不变的，只有局部内容需要动态产生和改变。  如果使用Servl
  • apple watch 指南 啸笑天 apple
    1. 文档 WatchKit Programming Guide（中译在线版 By @CocoaChina） 译文 译者 原文 概览 - 开始为 Apple Watch 进行开发 @星夜暮晨 Overview - Developing for Apple Watch 概览 - 配置 Xcode 项目 - Overview - Configuring Yo
  • java经典的基础题目 macroli java编程
    1.列举出 10个JAVA语言的优势 a:免费，开源，跨平台(平台独立性)，简单易用，功能完善，面向对象，健壮性，多线程，结构中立，企业应用的成熟平台, 无线应用 2.列举出JAVA中10个面向对象编程的术语 a:包，类，接口，对象，属性，方法，构造器，继承，封装，多态，抽象，范型 3.列举出JAVA中6个比较常用的包 Java.lang;java.util;java.io;java.sql;ja
  • 你所不知道神奇的js replace正则表达式 qiaolevip 每天进步一点点学习永无止境纵观千象regex
    var v = 'C9CFBAA3CAD0'; console.log(v); var arr = v.split(''); for (var i = 0; i < arr.length; i ++) { if (i % 2 == 0) arr[i] = '%' + arr[i]; } console.log(arr.join('')); console.log(v.r
  • [一起学Hive]之十五-分析Hive表和分区的统计信息(Statistics) superlxw1234 hivehive分析表hive统计信息hive Statistics
    关键字：Hive统计信息、分析Hive表、Hive Statistics   类似于Oracle的分析表，Hive中也提供了分析表和分区的功能，通过自动和手动分析Hive表，将Hive表的一些统计信息存储到元数据中。   表和分区的统计信息主要包括：行数、文件数、原始数据大小、所占存储大小、最后一次操作时间等；   14.1 新表的统计信息 对于一个新创建
  • Spring Boot 1.2.5 发布 wiselyman spring boot
        Spring Boot 1.2.5已在7月2日发布，现在可以从spring的maven库和maven中心库下载。   这个版本是一个维护的发布版，主要是一些修复以及将Spring的依赖提升至4.1.7(包含重要的安全修复)。   官方建议所有的Spring Boot用户升级这个版本。   项目首页 | 源
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他