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)

  • 【原生JS】 前端JS字符串最常用 20 道面试题总结（含详细代码解析） 全栈前端老曹 前端javascript开发语言面试vuereact.jsecmascript
    原生JavaScript字符串最常用20道面试题总结（含详细代码解析）字符串是前端开发中最常见的数据类型之一，也是各大公司高频考察点。以下是老曹总结的原生JS字符串相关的20道高频面试题，涵盖字符串操作、正则表达式、性能优化、常见陷阱等多个方面，每道题都配有详细的代码示例和讲解。面试题目录序号题目考察点1slice,substring,substr的区别？截取方法2如何判断一个字符串是否包含另一个
  • 前端Js框架汇总 是小颜颜呀 前端前端框架技术
    前端Js框架汇总概述：有些日子没有正襟危坐写博客了，互联网飞速发展的时代，技术更新迭代的速度也在加快。看着Java、Js、Swift在各领域心花路放，也是煞是羡慕。寻了寻.net的消息，也是振奋人心，.netcore1，mono，xamarin等等，但大多都还在狂吼的阶段。其实一直以来对技术的理解是技术服务于业务和产品，产品又在不同程度的推进着技术的演进。Web、无线、物联网、VR、PC从不同方向
  • Protobuf 数字类型选择策略：Int64 vs String 全方位分析 后端
    一、问题背景与核心矛盾在定义ProtobufRPC接口时，数字类型的选择会直接影响前后端开发体验和系统性能。以下是典型场景示例：messageAdRequest{//应该用哪种类型？int64ad_id=1;//方案Astringad_id=1;//方案B}矛盾焦点前端js/js等会自动将int64转为String类型示例：下面的字段business_value_id,前端得到的为String接口
  • 《HarmonyOSNext Web组件双向通信开发指南：JavaScript互调+动态注册+跨端数据流转实战》 harmonyos-next
    《HarmonyOSNextWeb组件双向通信开发指南：JavaScript互调+动态注册+跨端数据流转实战》\##HarmonyOSNext##ArkTs##教育本文适用于教育科普行业进行学习，有错误之处请指出我会修改。一、应用侧如何调用前端JS函数？应用侧有两种神器可以调用前端页面的JavaScript函数：runJavaScript()和它的升级版runJavaScriptExt()！两者的
  • SpringBoot配置long转String 丢失精度的几种方式 猩猩之火 springbootjavaspringboot后端java
    在web项目中,Java后端传过来的Long/long类型，前端JS接收时会丢失精度。导致数据有问题。下面分享几种long转string的方式。第一种：在相应的类的属性上添加JsonSerialize注解@JsonSerialize(using=ToStringSerializer.class)@TableId(value="process_id")@JsonSerialize(using=ToS
  • @Builder注释导致@RequestBody的前端json反序列化失败，HTTP400 結城 Javajavaspringboot
    项目里发生了一个bug，就是前端请求一个接口时候，报了HTTP400BadRequest通常来说这个问题是前后端的参数没对齐，比如前端传了个String，但后端对应的是Integer。所以我就排查了半天，结果没发现啥错误，有点懵。最后发现问题出在Controller层里，@RequestBodySubmitParam。而SubmitParam中的某一个参数，我给加上了@Data和@Builder，
  • 前端js获取当前经纬度（H5/pc/mac/window都可用） 我在北京coding 前端javascript开发语言
    前端JS获取当前位置的经纬度（H5/PC/mac/window都可用，亲测！），效果如下。完整代码如下：varbdLocation={init:function(){if(navigator.geolocation){navigator.geolocation.getCurrentPosition(locationSuccess,locationError,{//指示浏览器获取高精度的位置，默认为
  • MInIO入门-04 基于minio+ckplayer视频点播 实现 cronboy javajsjavaredis开发语言
    MInIO入门-04基于minio+ckplayer视频点播实现项目传送门1、ckplayer（前端js播放器）1.1、官网https://www.ckplayer.com/2、后台实现2.1、参考博客https://blog.csdn.net/waleit/article/details/1176933642.2、通过request的Range来实现2.3、后台代码packagecn.lyf.m
  • 文件上传漏洞—服务端检测&绕过方法总结（持续更新) the zl Web安全—漏洞学习web安全安全前端
    Web安全—文件上传漏洞文件上传漏洞简介和原理可参考Web安全—文件上传漏洞此篇文章，本文仅对服务端检测方法和绕过方法进行总结服务端检测方法&绕过方法：检测方法一：前端JS检测（通常为检测文件扩展名）绕过方法：1，禁止Web浏览器加载JS代码2，修改前端代码，添加需要上传的脚本语言扩展名3，Burpsuite抓包修改filename参数检测方法二：服务端MIME类型检测（检测POST内容的Cont
  • vue2学习文档 大卡拉米 学习vue.js前端
    Vue2学习文档英文官网:Vue2:https://vuejs.org/Vue3：https://vuejs.org/中文官网Vue2:https://v2.cn.vuejs.org/Vue3:https://cn.vuejs.org/入门前言用来构建用户界面的渐进式的js库与其它前端JS框架的关联借鉴Angular的模板和数据绑定技术借鉴React的组件化和虚拟DOM技术特点声明式无需亲自操作D
  • 后端向前端传递数据，前端再向后端把数据传递回去的方法（servlet,jsp,ajax） 全菜工程师小鹿 学习javascriptjavanode.js
    后端向前端传递数据:ListarticleList=userservice.finduserList();//从数据库取用户列表总之就是取出一个list也可以是其他渠道获得的listsession.setAttribute("articleList",articleList);//list放到session里面前端jsp页面${li.userid}${li.articleid}ajax中获取art
  • 踩坑日记(将Long类型转换成String类型引发的问题) 咸鱼立志 javaspringboot
    一.前提线上有一张表，主见id原来使用的是自增id。但是有一个新的业务，在做这个业务的时候，这个id被赋值为雪花算法。致使这个表的主见id值特别大。线上有很多业务进行修改的时候，都是通过此表的id进行修改。突然，有人反馈说功能无法使用。这个时候我们立马进行排查，发现我们返回给前端id的值发生了四舍五入的情况。后续通过网上查找，发现是说因为Long类型的数值太多，超过了前端js的显示长度，所以就会出
  • [特殊字符] Python高级爬虫：抓取JavaScript动态内容网页的终极指南（ Python爬虫项目 python爬虫javascript数据分析数据挖掘开发语言ecmascript
    一、背景介绍：动态网页为何难爬？在现代Web开发中，JavaScript已成为前端渲染的主力军。许多网页的数据并不是直接嵌入HTML中，而是通过JavaScript在页面加载后从后台接口异步请求（AJAX），或通过React/Vue等框架组件动态渲染。这类页面我们称之为动态网页。例如你访问京东、微博或知乎，页面初始HTML结构非常简洁，而内容是通过前端JS逻辑调用接口加载进来的。这就意味着传统re
  • FastDFS，Redis，Solr，ActiveMQ核心技术整合六 wespten Spring全家桶微信小程序Java全栈开发
    02.商品分类选择-分析-前端js_03.商品分类选择-分析-数据库_(JJTree渲染过程解析(parent_id为0就是父节点，is_parent为1说明下面有子节点，state1正常2删除。tree组件有ztree，异步控件树每个节点都有id，展开节点向服务端发送请求，请求检索子节点列表，参数当前节点的id，服务端响应json数据，)&)04.商品分类选择-Service_05.商品分类选型
  • 【渗透测试】任意文件上传下载漏洞原理、复现方式、防范措施 凪z 网络安全渗透测试web安全安全
    文章目录任意文件上传下载漏洞原理、复现方式、防范措施一、任意文件下载**原理**示例产生原因**复现方式**1、判断是否有下载漏洞2、尝试下载文件**防范措施**二、任意文件上传**原理****复现方式**1、寻找上传接口2、前端js校验情况3、服务端校验情况检查内容情况MIME类型欺骗`getimagesize()`检查后缀情况**防范措施**三、综合防御策略**技术层面****管理层面**总结
  • WebSocket—实现实时通讯 玫瑰花馅饼 前端websocket网络协议网络
    文章目录前言一、websocket是什么二、WebSocket连接过程三、WebSocket使用步骤1.后端websocket服务器2.前端JS代码四、连接成功：心跳检测五、连接失败：重连机制六、Websocket的限制前言电子邮件系统能够做到不刷新（不主动请求）就能收到新邮件提醒，主要依赖于WebSocket等实时通信技术。一、websocket是什么全双工通信一种双向同时通信的通信方式，其中通
  • 微信小程序-下拉滚动加载数据 程序猿John 前端技术云云微信小程序小程序
    1.实现流程图所谓工欲善其事，必先利其器，做程序之前咱们把思路整理一下，画流程图是比较好的方式2.前端JS和WXML视图绑定scrollToLower方法，当离底部还有100时候触发;WXML：订单金额：{{item.price}}元2022-09-30{{text}}datalock等于1时，不发出网络请求，已免不必要的网络开销;数据返回时使用concat拼接JS：data:{list:[],p
  • 前端js入门——JavaScript 数据类型 前端奇妙妙 程序员编程web前端资讯科技ITJavaScriptvue框架程序员编程web前端资讯JavaScript
    一.JavaScript中有两大类数据类型:（1）.值类型:String、Number、Boolean、Symbol（ES2015新增）、null和undefined。boolean，number，string三种值类型，JavaScript为之提供了对应包装类型，包装类型和引用类型的差别在于对象的生存周期，在读取模式下访问值类型数据的值时，内部会自动为之创建包装类型的对象，提供了相关方法和属性，
  • CORS与OPTIONS请求 三金C_C 计算机网络CORSoptions请求跨域
    CORS什么是CORS（跨域资源共享）？跨域不是后端的问题，是浏览器出于安全策略主动拦截✅关键点：Access-Control-Allow-Origin是谁给谁的？•是后端响应头里给前端浏览器的•告诉浏览器：✅“我允许你这个来源访问我”•如果没有这个头，或者值不对——浏览器直接拦截，前端JS连响应内容都拿不到！浏览器执行流程：浏览器发现请求是跨域的（不同域、端口、协议）发起一个预检请求（OPTIO
  • 【springboot】基于webSocket+vue的消息推送功能 fangxiang163 javawebsocketvue
    文章目录1、webSocket协议2、前端JS代码实现webSocket属性：webSocket事件：webSocket方法：3、后端基于springBoot+webSocket方式实现maven依赖springboot托管ServerEndpointExporter对象创建webSocket服务端对象4、其他消息推送通知及时用户一些细节1、webSocket协议webSocket是一种在http
  • #前端js发异步请求的几种方式 在下千玦 前端javascript开发语言
    JavaScript进行异步请求的方式经历了多个阶段的发展，每个阶段都在解决上一阶段的问题，变得更简洁、易用、强大。我们从历史发展角度来看，主要经历了以下几个阶段：1️⃣早期阶段：XHR（XMLHttpRequest）诞生背景1999年W3C引入XMLHttpRequest，是AJAX（异步JavaScript和XML）的基础。主要用于局部刷新页面，避免整个页面重新加载，提高用户体验。早期用于XM
  • 2025 前端 JS 源码逆向实战：6 种绕过限制查看源码的合法方法 阿贾克斯的黎明 网络安全状态模式
    目录引言：为何需要绕过前端JS限制？一、浏览器开发者工具深度用法1.动态断点拦截（Chrome117+增强功能）2.Overrides功能持久化修改二、代理工具拦截与响应篡改1.BurpSuite2025动态解混淆三、浏览器扩展生态应用1.资源嗅探与下载（2025新版插件）四、本地代码劫持与Hook技术1.覆盖原生JavaScript方法五、移动端源码提取方案1.Android混合应用逆向六、源码
  • pear-admin-boot开发框架使用记录（三） 后青春期的诗go 经验分享javaspringbootspringlog4jmybatis
    一、实现部门选择操作用于从组织架构里选择出部门的操作，如开发日志管理模块，创建人新增日志时可以通过选择框选择相应共享的部门。数据库表调整在数据表添加2个字段：sharedeptid共享部门idvarcharsharedeptname共享部门名称varchar前端html页面调整页面添加如下代码：共享部门前端JS调整添加如下代码：letdtree=layui.dtree;dtree.renderSe
  • 抖音用户视频批量下载工具开发全解析 木觞清 音视频python
    一、逆向工程原理剖析1.1抖音Web端防护体系抖音采用五层防御机制保护数据接口：graphLRA[浏览器指纹检测]-->B[请求参数签名]B-->C[Cookie动态验证]C-->D[请求频率限制]D-->E[IP信誉评级]1.2核心参数解密参数名称作用原理生成方式有效期x-bogus请求签名防篡改前端JS生成（需反混淆）5分钟msToken设备会话标识首次访问自动生成30分钟__ac_signa
  • 一篇文章让你实现前端JS 、 Golang 、 Python如何接入DeepSeek大模型实现自己的AI 一只理智恩 AI前端后端pythongolangjavascript
    本文将通过三种技术栈实现与DeepSeek大模型的对话交互，提供可直接运行的代码示例及详细注释。一、通用准备步骤1.获取API密钥登录DeepSeek开发者平台创建应用获取DEEPSEEK_API_KEY2.创建测试环境#项目结构deepseek-demo/├──frontend/#前端代码│└──index.html├──go-backend/#Golang后端│└──main.go├──py-
  • 文件上传漏洞总结（含原因+防御措施）+白名单+黑名单+内容、头+解析漏洞/修补方案 南部余额 漏洞总结安全漏洞web安全安全
    文件上传漏洞简单总结+白名单+黑名单+内容、头+解析漏洞/修补方案问题什么是文件上传漏洞?危害?防御措施?文件上传(验证/绕过)措施?前端js类绕过?后端黑名单绕过特殊解析后缀.htaccess解析大小写绕过点绕过空格绕过::$DATA绕过配合解析漏洞(*待补充)双后缀名绕过白名单绕过MIME绕过%00截断0x00截断0x0a截断内容及其他绕过?文件头检测二次渲染条件竞争突破getimagesiz
  • rust 实例化动态对象 heroboyluck rustrust开发语言trait
    在功能开发中，动态创建或获取某个对象的情况很多。在前端JS开发中，可以使用工厂函数，通过给定的类型标识创建不同的对象实例；还可以通过对象映射来实现动态创建对象。在Rust中，我们也可以使用这两种方式去创建对象实例，但实现书写的方式可能略有不同；rust还可以通过序列化JSON数据时进行枚举类型匹配。我们定义好需要测试的数据结构体、方法。小狗、小猫有自己的字段、方法,它们有相同的字段name,也有相
  • Java中Long类型处理精度丢失问题 原冰洋 javabug
    Long类型处理精度丢失问题描述后端给前端传一个long类型的数据，如果数据过大，前端js接收就会精度丢失，如果再传过来给后端，后端接收到的数据也是精度丢失的数据解决方案只需要将后端从传给前端的long类型的数据变成string类型就好了。1.提供对象转换器jacksonObjectMapper，基于jackson进行java对象到json数据的转换2.在webMvcConfig配置类中扩展Spr
  • Vue学习笔记--＞＞基础篇 丑小鸭变黑天鹅 笔记vue
    Vue学习笔记一、Vue核心1、Vue的基本认识1、官网2、介绍3、特点4、与其它前端JS框架的关联5、vue扩展插件2、Vue的基本使用3、理解Vue的MVVM4、模板语法5、计算属性基本使用6、强制绑定class和style7、条件渲染8、列表渲染维护状态数组更新检测9、列表的搜索与排序10、事件处理11、表单数据的自动收集12、Vue生命周期13、过渡和动画1、css过渡2、css动画3、自
  • 前端js变量踩坑，部分手机浏览器不支持let、const weixin_34244102 前端python移动开发ViewUI
    2019独角兽企业重金招聘Python工程师标准>>>浏览器通过userAgent判断机型是Android还是iOS，很简单的几行代码，总有iOS用户手机判断不出来。刚开始总以为是判断的错误，优化了好几版，鉴于身边一直没有真机，终是治标不治本，今日偶遇真机，恍然大悟。。。var才是简单js的王道，引以为鉴转载于:https://my.oschina.net/AmosWang/blog/301786
  • 多线程编程之卫生间 周凡杨 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其他