云*雨
云*雨

Javascript之瀑布流(一)

哇，瀑布流，是的，不错，不错，真的不错，很好玩的样子，于是自己想玩玩啊，来吧，就玩起。

循序渐进，我这里采用原生的js代码来书写。为了方便大家运行代码，我就全部样式和CSS都写在html里面了，当然还需要图片，我会打包。

来上代码。

直接代码

<!DOCTYPE HTML>
<html>
    <head>
    <meta charset="utf-8">
    <title>哇，瀑布流啊</title>
    <style type="text/css">
    
       @media screen and (min-width:1550px){
            .waterfall-container {    
                 width:1400px;            
            }
        }
        
        @media screen and (max-width:1549px) and (min-width:1366px){
            .waterfall-container {
                 width:1200px;            
            }
        }
        @media screen and (max-width:1365px) and (min-width:700px) {
            .waterfall-container {
                 width:500px;            
            }
        }
        
        @media screen and (max-width:699px) {
            .waterfall-container {
                 width:350px;            
            }
        }
        
        .waterfall-container{                 
            top: 0;
            float:left;            
            display:inline;
            position:relative;
        }
        
        .water-molecule {
             position:absolute;
             border: solid 1px #ccc;
             padding: 10px;
             width: 200px;
             top: 0px;
             left: 0px;
             -webkit-transition: all .7s ease-out .1s;
             -moz-transition: all .7s ease-out .1s;
             -o-transition: all .7s ease-out .1s;
             transition: all .7s ease-out .1s
        }
        img { width: 100%; }
    
        
    </style>
    </head>
    <body >
        <div>
            哟，好拽的瀑布流！！！
        </div>
        <div style="position:relative">
            <div style="left:0; float:left; display:inline; width:100px">
            
                <ul id="mediaSet">
                    <li><a href="#">1300px</a></li>
                    <li><a href="#">1100px</a></li>
                    <li><a href="#">900px</a></li>
                    <li><a href="#">600px</a></li>
                </ul>
            
            </div>
            <div class="waterfall-container">
                  <div class="water-molecule"><a href="images/temp_img02.jpg"><img src="images/temp_img02.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img03.jpg"><img src="images/temp_img03.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img04.jpg"><img src="images/temp_img04.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img09.jpg"><img src="images/temp_img09.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img05.jpg"><img src="images/temp_img05.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img06.jpg"><img src="images/temp_img06.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img07.jpg"><img src="images/temp_img07.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img08.jpg"><img src="images/temp_img08.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img09.jpg"><img src="images/temp_img09.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img10.jpg"><img src="images/temp_img10.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img11.jpg"><img src="images/temp_img11.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img12.jpg"><img src="images/temp_img12.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img13.jpg"><img src="images/temp_img13.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img14.jpg"><img src="images/temp_img14.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img15.jpg"><img src="images/temp_img15.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img15.jpg"><img src="images/temp_img15.jpg"/></a> </div>
                  
            </div>
        </div>

    <script type="text/javascript">
    
        function minColunmnIndex (arr) {
            var minColumn = 0;
            var min = arr[minColumn];
            for (var i = 1,len=arr.length; i < len; i++) {
                var temp = arr[i];
                if (temp < min) {
                    minColumn = i;
                    min = temp;
                };
            };
            return minColumn;
        }
        
        Object.extend = function(destination, source) {
            for (var property in source) {
                destination[property] = source[property];
            }
            return destination;
        }
    
        function waterWall(container,settings){    
        
            var _settings = {
                margin:10,
                cellClass:"water-molecule"            
            };
            if(typeof settings != "undefined"){
                _settings = Object.extend(_settings,settings);
            }
            var margin = _settings.margin;
            var boxes = document.getElementsByClassName(_settings.cellClass);
            var wContainer = container;
            var boxWidth = boxes[0].offsetWidth + margin;
            
            function waterfall () {
                var columnHeight=[];
                var waterFallWith = container.offsetWidth;
                var n = parseInt(waterFallWith/boxWidth);
                var columnNum = n == 0 ? 1 : n;
                var baseLeft = wContainer.offsetLeft;
                for (var i = 0,l=boxes.length; i <l ; i++) {
                    if (i<columnNum) {
                        columnHeight[i]=boxes[i].offsetHeight+margin;
                        boxes[i].style.top = 0;
                        boxes[i].style.left =  i*boxWidth+margin+'px';
                    } else{
                        var innsertColumn = minColunmnIndex(columnHeight),
                            imgHeight = boxes[i].offsetHeight+ margin;
                        boxes[i].style.top = columnHeight[innsertColumn]+'px';
                        boxes[i].style.left = innsertColumn*boxWidth+margin+'px';
                        columnHeight[innsertColumn] +=imgHeight; 
                    };

                };
            };                
            
            var wf = {
                master: container,
                waterfall:waterfall
            }
            
            return wf;
        }
        var wf = new waterWall(document.getElementsByClassName("waterfall-container").item(0));
        window.onload = function(){wf.waterfall();};
        window.onresize = function(){
            wf.master.style.width = null;
            wf.waterfall();
        };
    
        
        document.getElementById("mediaSet").addEventListener("click",function(ev){
            var link  = ev.target,
            width = link.text;
            wf.master.style.width = width;
            wf.waterfall();
            
        },false);
        
    </script>
</body>
</html>

 

分析：

1. 核心就是waterfall方法，计算当前容器的offsetWith，和定义好的单位元素的宽度以及定义的margin来计算列数，再通过当前索引

2. minColumnIndex来计算当前高度最小的列，然后取改列已经存有的高度作为top的值，用 index * 单位元素的宽度 + margin作为 left的值

3.头部定义媒体查询，做到初始化的时候，自动调整，当然，在resize的时候可以动态重新计算，我这里没有这么做

4. 设置了几个 1300,100， 900， 600几个值，用来点击测试。

 

源码下载：

http://files.cnblogs.com/files/mouse_in_beijing/PB.zip

 

你可能感兴趣的:(Javascript之瀑布流(一))

  • WPF静态资源StaticResource和动态资源DynamicResource有什么区别，x:Static又是什么意思？ 猫霸 分布式wpfc#.net
    什么叫WPF的资源(Resource)资源是保存在可执行文件中的一种不可执行数据。WPF中资源用ResourceDictionary类表示，这个类就是一个字典，字典的key和value都是object类型。所以在WPF中，资源可以可以是图像、字符串等所有的任意CLR对象，只要对象有一个默认的构造函数和独立的属性。也就是说，应用程序中非程序代码的内容，比如点阵图、颜色、字型、动画/影片档以及字符串常
  • 一文读懂WPF系列之MVVM Marzlam C#WPF系列wpf
    WPFMVVM什么是MVVMWPF为何使用MVVM机制WPFMVVM的实现手段INotifyPropertyChanged数据绑定的源端通知原理PropertyChanged事件双向绑定的完整条件常见疑惑问题什么是MVVM翻译全称就是model-view-viewmodel3部分内容以wpf的概念角度来解释就是数据库数据源模型----xmalUI视图----DataContextViewmodel
  • vue computed 计算属性简述 Cshaosun web前端VUEvue.js前端javascript
    Vue的‌计算属性（ComputedProperties）‌是Vue实例中一种特殊的属性，用于‌声明式地定义依赖其他数据动态计算得出的值‌。它的核心优势在于能够自动追踪依赖关系，并缓存计算结果，避免重复计算，提升性能。计算属性的特点‌依赖追踪‌计算属性会自动检测其内部依赖的响应式数据（如data中的属性或其他计算属性）。当依赖的数据变化时，计算属性会重新计算。‌缓存机制‌计算属性的结果会被缓存，只
  • watch与computed的区别、运用的场景 Cshaosun web前端VUE前端javascriptvue
    computed和watch都是响应式数据变化的重要机制，但它们在功能、使用场景和性能表现上有显著的区别。主要区别功能和用途1、computed：计算属性，用于基于其他数据属性进行计算，并返回一个结果。它具有缓存机制，只有当依赖的数据发生变化时才会重新计算。2、watch：监听器，用于监听某个数据的变化，并在变化发生时执行回调函数。它不具有缓存机制，每次数据变化都会触发回调函数。性能表现1、com
  • VUE之---slot插槽 Cshaosun web前端VUEvue.js前端javascript
    什么是插槽slot【插槽】，是Vue的内容分发机制，组件内部的模板引擎使用slot元素作为承载分发内容的出口。slot是子组件的一个模板标签元素，而这一个标签元素是否显示，以及怎么显示是由父组件决定的。VUE中slot【插槽】的分类与应用插槽有三种：默认插槽、具名插槽、作用域插槽。（1）默认插槽语法：示例：在子组件中定义一个默认插槽{{title}}在开发中我们经常使用到组件之间的传值，但很多情况
  • MySQL事务 Gadus_ mysqlmysql数据库
    事务的起源acid-原子性、一致性、隔离性、持久性原子性要么全做要么全不做【转账要么没转，要么转账成功，不存在中间状态】为了保证数据库中某些操作的原子性，需要保证如果在执行操作的过程中发生了错误，就把已经执行的操作恢复成没执行前的样子隔离性两次状态转换应该是互不影响的不仅要保证状态转换的操作以原子性的方式执行完成，而且要保证其他的状态转换不会影响到本次状态转换一致性现实世界中存在的约束也要在数据库
  • 调节磁盘和CPU的矛盾——InnoDB的Buffer Pool Gadus_ mysqlmysqldb
    缓存的重要性无论是用于存储用户数据的索引【聚簇索引、二级索引】还是各种系统数据，都是以页的形式存放在表空间中【对一个/几个实际文件的抽象，存储在磁盘上】如果需要访问某页的数据，就会把完整的页数据加载到内存中【即使只访问页中的一条记录】，在读写访问之后不立即释放该页的内存空间，将其缓存起来，下次请求访问该页面就可以省下磁盘I/O开销BufferPool在MySQL服务器启动时就向操作系统申请一片连续
  • Spark中Maven的用法 Betty_蹄蹄boo sparkmaven大数据
    在IDEA中去创建项目，并编写java代码来操作集群中的文件1.IDEA中创建Maven项目步骤一：点击File->New->Project，在弹出的窗口左侧选择Maven，点击Next：步骤二：填写项目的GroupId、ArtifactId、Version等信息（这些对应pom.xml中的关键配置），点击Next。步骤三：确认项目配置信息无误后，点击Finish，IDEA会自动生成Maven项目
  • WPF ObjectDataProvider lfw2019 Wpfwpf
    在WPF（WindowsPresentationFoundation）中，ObjectDataProvider是一个非常有用的类，用于将非UI数据对象（如业务逻辑类或服务类）与XAML绑定集成。它允许在XAML中直接调用方法、访问属性或实例化对象，而无需编写额外的代码。以下是关于ObjectDataProvider的详细说明和使用方法：1.定义与概述ObjectDataProvider是Syste
  • 普通人学AI：如何最简单、通俗地理解大模型？ 大模型玩家 人工智能学习AI编程langchain大模型ai程序员
    前言AI浪潮已经来袭，我们每个人都身处其中，我相信，每个人都有必要学习AI。但问题是，该从何学起？我相信这是大部分之前没接触过AI的人的问题，我也是其中一员。我不是AI科学家，之前也没有技术基础，所以，我想将自己的学习结果记录下来，一方面是用自己能理解的话讲出来自己学到的知识，另外一方面也是分享给所有想要在这波浪潮中不被冲走的人。我是一个不懂技术的普通人，所以这个系列就叫做「普通人学AI」，以下是
  • 机器学习--网格搜索 2201_75491841 机器学习人工智能网格搜索
    引言在机器学习的广袤世界里，构建一个性能卓越的模型是众多从业者不懈追求的目标。而模型性能的好坏，很大程度上依赖于超参数的设置。今天，我们就来深入探讨一种常用且有效的超参数调优方法——网格搜索。一、什么是网格搜索网格搜索（GridSearch），简单来说，就是通过遍历给定的超参数取值范围，尝试所有可能的超参数组合，并在每个组合下训练模型，根据模型在验证集上的性能指标（如准确率、均方误差等）来选择最优
  • 3种方式获取100以内的质数(Python) 'hello_world'529 python算法开发语言
    目录1.质数2.方式1：使用嵌套循环，判断这个数是否存在除1和它本身外的其他因数3.方式2：假设法，假设num是一个质数4.方式3：统计num的因数的个数5.封装一个函数，判断一个数是否是质数。1.质数质数是只有1和它本身两个因数的自然数（大于1）；2是最小的质数，也是唯一的偶质数；1既不是质数，也不是合数。100以内的质数有：2,3,5,7,11,13,17,19,23,29,31,37,41,
  • 什么是索引？为什么使用索引？索引有哪些数据结构？如何使用索引？ 严文文-Chris 数据库索引数据库
    什么是索引？索引（Index）是数据库中一种特殊的数据结构，类似于书籍的目录。它通过建立特定列（或列组合）的快速访问路径，帮助数据库系统高效定位数据，避免全表扫描。为什么使用索引？核心价值：空间换时间加速查询时间复杂度从O(n)降低到O(logn)（如B+Tree索引）例：1亿条数据，全表扫描需10秒，索引查询仅需0.01秒降低I/O消耗索引文件体积通常小于数据文件通过索引定位后，只需读取目标数据
  • 汽车早报｜小米辟谣买SU7补贴2万 丰田认证问题违反联合国标准；Stellantis或自产零部件进一步降低成本 | 最新快讯 最新科技快讯 汽车人工智能
    乘联会秘书长崔东树：汽车业竞争不是低层次的“卷”6月10日，乘联会秘书长崔东树发文谈及了对当下汽车行业竞争以及近期汽车公司高管观点的看法。崔东树表示，目前汽车行业的“卷”，主要是是新旧生产动能的转换，现在的竞争不是简单的低层次的卷，而是产业大变革的必要阶段。汽车公司要适应行业全面竞争的“卷”，但企业应该合理保护员工的权益，不能牺牲员工的利益。买SU7补贴2万，不到20万落地？小米王化辟谣近日，有传
  • 数据一致性策略之延迟双删-实现 空说 javaredismysql数据一致性延迟双删
    延迟双删查询数据之前优先去查Redis的缓存数据，减少数据库压力；如果没有缓存会去查数据库，通过查询数据库后缓存热点KeyCache-Aside策略高并发场景时，严重生产bug：数据不一致业务场景：事务1：A修改数据库数据B修改Redis数据事务2：C修改数据库数据D修改Redis数据正常情况：A->B->C->D并发情况下就会存在A->C->D->B导致A修改数据库后，C来读到没有修改的Redi
  • 一文看懂：什么是业务架构、组织架构和流程架构 有颜有货 企业架构架构大数据
    业务架构是“蓝图”，组织架构是“执行者”，流程架构是“行动路径”，三者协同才能实现战略到落地的闭环。1、各自内涵首先，业务架构是企业战略的具象化表达，描述企业的核心业务能力、价值流、产品/服务、客户关系以及支撑这些业务的资源（如技术、数据、合作伙伴等）。总结：业务架构就是回答“企业做什么、如何创造价值”的问题。其次，组织架构是企业的“骨骼系统”，定义人员、角色、部门之间的权责关系和协作方式，包括层
  • CExercise_11_单链表 手动实现一条单链表 精彩漂亮ing 题海拾贝~c语言
    题目：基于以下头文件，手动实现一条单链表：//头文件保护语法#ifndefLINKED_LIST_H#defineLINKED_LIST_H//包含linked_list.h头文件也会同步包含它包含的其它头文件//根据这一特点,可以选择将一些共用的头文件包含在此头文件中#include#include#includetypedefintDataType;//定义链表结点结构typedefstruc
  • 蓝桥杯比赛常考算法_备战蓝桥--算法竞赛入门第一章总结 RandomGuy 蓝桥杯比赛常考算法
    笔者备战蓝桥杯先打算看完《算法竞赛入门经典》第2版，在这里写下第一章的笔记，供自己和大家参考。鸡兔同笼问题原题：已知鸡和兔的总数量为n，总腿数为m。输入n和m，依次输出鸡的数目和兔的数目。如果无解，则输出Noanswer。样例输入：1432样例输出：122样例输入：1016样例输出：Noanswer看到题目后，可以很简单的写出方程组(然而我第一反应是暴力求解，题目做多的后遗症)，设鸡有a只，兔有b
  • Java平台的FCKeditor富文本编辑器集成包 亜恵恵阿由
    本文还有配套的精品资源，点击获取简介：FCKeditor是一款开源的JavaScript库，用于在Web应用程序中提供桌面级文本编辑体验。Java版本的FCKeditor允许Java开发者将此编辑器集成到服务器端应用程序中，提供了包括字体样式调整、图像管理等丰富功能，并支持通过API进行定制化开发。它要求开发者理解Web开发，并注意处理安全性和兼容性问题。1.fckeditor-java-2.4.
  • 蓝桥杯备赛笔记（一）——基础算法篇 疯狂程序员花椒 蓝桥杯备赛笔记蓝桥杯笔记算法
    目录蓝桥杯备赛笔记（一）——基础算法篇：算法时间复杂度和空间复杂度分析一、基础算法篇1.算法时间复杂度和空间复杂度分析1.1算法的定义及特性1.2评价算法优劣的基本标准1.3算法的时间复杂度1.3.1问题规模和语句频度1.3.2算法的时间复杂度定义1.3.3算法的时间复杂度分析举例1.3.4最好、最坏和平均时间复杂度1.4算法的空间复杂度2.枚举算法文章持续更新中，如果您觉得对您有帮助，点个赞再走
  • Python教学中“做中学”理念的实践路径与效果评估 燕鹏01 智教新视界：AI与教育科技融合python开发语言编程学习教学学习学习方法
    一、引言在数字化时代的浪潮下，编程教育在中小学教育体系中的重要性日益凸显。2022年5月，教育部发布的《义务教育信息科技课程标准(2022年版)》，正式将信息科技课程纳入义务教育范畴，旨在培养学生的信息意识、计算思维、数字化学习与创新以及信息社会责任等核心素养。其中，计算思维要求学生能够对问题进行抽象、分解、建模，并通过设计算法形成解决方案，这一能力的培养成为了编程教育的核心目标。Python作为
  • ARM架构指针寄存器全面解析 阿牛的药铺 LINUX驱动学习STM32裸机开发arm开发架构
    ARM架构指针寄存器全面解析一、ARM寄存器基础架构ARM处理器采用RISC架构，其寄存器组织在不同架构版本中有所差异，但核心指针寄存器始终保持一致。ARM处理器通常包含16个通用寄存器(R0-R15)和多个状态寄存器，其中几个关键寄存器专门用于指针操作。二、核心指针寄存器详解1.程序计数器(PC/R15)功能特性：存储当前执行指令的内存地址ARM状态下PC值为当前指令地址+8（三级流水线效应）T
  • ARM内核全解析，从ARM7,ARM9到Cortex-A7,A8,A9,A12,A15到Cortex-A53,A57 我是亲民
    ARM内核全解析，从ARM7,ARM9到Cortex-A7,A8,A9,A12,A15到Cortex-A53,A57前不久ARM正式宣布推出新款ARMv8架构的Cortex-A50处理器系列产品，以此来扩大ARM在高性能与低功耗领域的领先地位，进一步抢占移动终端市场份额。Cortex-A50是继Cortex-A15之后的又一重量级产品，将会直接影响到主流PC市场的占有率。围绕该话题，我们今天不妨总
  • 小米官方回应：不存在全球范围内停止使用 MI 品牌的说法 咕噜咕噜88 资讯手机
    日前，有媒体报道小米最新发布的MIX4全面屏手机，全面采用了全新的“xiaomi”品牌Logo，而不是“MI”字Logo，故猜测小米在未来发布的产品可能将全部使用“xiaomi”标识，“MI”字Logo可能会被废除。对于部分媒体误解小米公司正在舍弃“MI”字Logo的说法。小米集团公关部王化对此回应称，MI标志在所有应用中具有最重要地位，是小米集团全球唯一品牌标志，作为小米集团企业形象、产品宣传形
  • vue富文本编辑器mavonEditor使用 蚊子李 vuevue
    这两天在做一个项目需要用到文本编辑的功能，项目结构是springmvc+vue-cil+element-ui,于是乎在网上找到了这个vue的富文本编辑器。1：通过npm命令安装npminstallmavon-editor--save2:在main.js中全局引入importmavonEditorfrom'mavon-editor'import'mavon-editor/dist/css/index
  • PHP轻量级在线客服系统源码 自适应手机移动端 banzhuan678 程序源码网站源码PHP源码轻量级在线客服客服系统客服源码
    简介：支持多商家支持多商家，每个注册用户为一个商家，每个商家可以添加多个客服。不限坐席每个商家可以无限添加坐席，不限制坐席数支持H5移动端系统自动适配移动端，也可以接入app（h5方式）支持微信公众号/微信小程序客服可以与微信公众号/小程序里的访客实时沟通常见问题自动回复支持设置常见问题，顾客可以点击常见问题系统会自动回复客服分组支持客服分组，例如售前客服，售后客服等，让专业的人员干专业的事情微信
  • Python 内嵌阿里云通义灵码介绍 CnLg.NJ Pythonpython开发语言
    通义灵码是阿里云推出的一款AI代码助手，在Python开发场景中也能发挥出强大的作用，下面从功能特性、使用优势、使用场景和示例等方面进行介绍。功能特性代码补全：它能根据你已经输入的Python代码上下文，智能预测接下来可能要编写的代码内容，给出合理的补全建议。比如你输入foriinra，它可能会补全为foriinrange(。代码解释：当你对一段Python代码的逻辑不太理解时，选中该代码片段，通
  • 「数据可视化 D3系列」入门第一章：Hello D3.js 八了个戒 数据可视化D3系列javascript开发语言前端数据可视化canvas
    HelloD3.js一、初识D3.js：用JavaScript操控DOM二、用D3操作DOM代码解析三、D3.js与jQuery的异同四、下一步学习一、初识D3.js：用JavaScript操控DOMD3.js（Data-DrivenDocuments）是一个强大的JavaScript库，它让我们能够用数据驱动文档的变换。让我们从一个简单的"HelloWorld"示例开始，逐步探索D3的核心概念。
  • 【刷题2025】数据结构初级（栈+双端队列+链表+树） cIlIegia_1234 数据结构链表
    #自定义一个数据类型classStack:def__init__(self):self.stack=[]defpush(self,item):"""入栈"""self.stack.append(item)defpop(self):"""出栈"""ifnotself.is_empty():returnself.stack.pop()else:raiseIndexError("栈为空，无法执行出栈操作
  • 速卖通商品详情API接口：功能、应用与开发指南 Json_18179014480 大数据jsonAPI信息可视化数据分析数据挖掘
    前言在全球跨境电商蓬勃发展的背景下，速卖通（AliExpress）作为阿里巴巴旗下的国际电商平台，凭借丰富的商品种类和庞大的用户群体，成为众多商家和开发者拓展海外市场的首选平台。为了满足商家和开发者对商品数据的深度需求，速卖通开放平台（AliExpressOpenAPI）推出了商品详情API接口，为数据获取、分析和应用提供了强大的支持。一、速卖通商品详情API接口概述速卖通商品详情API接口是速卖
  • 强大的销售团队背后 竟然是大数据分析的身影 蓝儿唯美 数据分析
    Mark Roberge是HubSpot的首席财务官，在招聘销售职位时使用了大量数据分析。但是科技并没有挤走直觉。 大家都知道数理学家实际上已经渗透到了各行各业。这些热衷数据的人们通过处理数据理解商业流程的各个方面，以重组弱点，增强优势。 Mark Roberge是美国HubSpot公司的首席财务官，HubSpot公司在构架集客营销现象方面出过一份力——因此他也是一位数理学家。他使用数据分析
  • Haproxy+Keepalived高可用双机单活 bylijinnan 负载均衡keepalivedhaproxy高可用
    我们的应用MyApp不支持集群，但要求双机单活（两台机器：master和slave）： 1.正常情况下，只有master启动MyApp并提供服务 2.当master发生故障时，slave自动启动本机的MyApp，同时虚拟IP漂移至slave，保持对外提供服务的IP和端口不变 F5据说也能满足上面的需求，但F5的通常用法都是双机双活，单活的话还没研究过 服务器资源 10.7
  • eclipse编辑器中文乱码问题解决 0624chenhong eclipse乱码
    使用Eclipse编辑文件经常出现中文乱码或者文件中有中文不能保存的问题，Eclipse提供了灵活的设置文件编码格式的选项，我们可以通过设置编码 格式解决乱码问题。在Eclipse可以从几个层面设置编码格式：Workspace、Project、Content Type、File 本文以Eclipse 3.3（英文）为例加以说明： 1. 设置Workspace的编码格式： Windows-&g
  • 基础篇--resources资源 不懂事的小屁孩 android
    最近一直在做java开发，偶尔敲点android代码，突然发现有些基础给忘记了，今天用半天时间温顾一下resources的资源。 String.xml    字符串资源   涉及国际化问题  http://www.2cto.com/kf/201302/190394.html   string-array
  • 接上篇补上window平台自动上传证书文件的批处理问卷 酷的飞上天空 window
    @echo off : host=服务器证书域名或ip，需要和部署时服务器的域名或ip一致 ou=公司名称, o=公司名称 set host=localhost set ou=localhost set o=localhost set password=123456 set validity=3650 set salias=s
  • 企业物联网大潮涌动：如何做好准备？ 蓝儿唯美 企业
    物联网的可能性也许是无限的。要找出架构师可以做好准备的领域然后利用日益连接的世界。 尽管物联网（IoT）还很新，企业架构师现在也应该为一个连接更加紧密的未来做好计划，而不是跟上闸门被打开后的集成挑战。“问题不在于物联网正在进入哪些领域，而是哪些地方物联网没有在企业推进，” Gartner研究总监Mike Walker说。 Gartner预测到2020年物联网设备安装量将达260亿，这些设备在全
  • spring学习——数据库（mybatis持久化框架配置） a-john mybatis
    Spring提供了一组数据访问框架，集成了多种数据访问技术。无论是JDBC，iBATIS(mybatis)还是Hibernate，Spring都能够帮助消除持久化代码中单调枯燥的数据访问逻辑。可以依赖Spring来处理底层的数据访问。 mybatis是一种Spring持久化框架，要使用mybatis，就要做好相应的配置： 1，配置数据源。有很多数据源可以选择，如：DBCP，JDBC，aliba
  • Java静态代理、动态代理实例 aijuans Java静态代理
    采用Java代理模式，代理类通过调用委托类对象的方法，来提供特定的服务。委托类需要实现一个业务接口，代理类返回委托类的实例接口对象。 按照代理类的创建时期，可以分为：静态代理和动态代理。 所谓静态代理：　指程序员创建好代理类，编译时直接生成代理类的字节码文件。 所谓动态代理：　在程序运行时，通过反射机制动态生成代理类。   一、静态代理类实例： 1、Serivce.ja
  • Struts1与Struts2的12点区别 asia007 Struts1与Struts2
    1) 在Action实现类方面的对比：Struts 1要求Action类继承一个抽象基类；Struts 1的一个具体问题是使用抽象类编程而不是接口。Struts 2 Action类可以实现一个Action接口，也可以实现其他接口，使可选和定制的服务成为可能。Struts 2提供一个ActionSupport基类去实现常用的接口。即使Action接口不是必须实现的，只有一个包含execute方法的P
  • 初学者要多看看帮助文档 不要用js来写Jquery的代码 百合不是茶 jqueryjs
    解析json数据的时候需要将解析的数据写到文本框中,  出现了用js来写Jquery代码的问题;   1, JQuery的赋值  有问题    代码如下: data.username 表示的是:  网易            $("#use
  • 经理怎么和员工搞好关系和信任 bijian1013 团队项目管理管理
            产品经理应该有坚实的专业基础，这里的基础包括产品方向和产品策略的把握，包括设计，也包括对技术的理解和见识，对运营和市场的敏感，以及良好的沟通和协作能力。换言之，既然是产品经理，整个产品的方方面面都应该能摸得出门道。这也不懂那也不懂，如何让人信服？如何让自己懂？就是不断学习，不仅仅从书本中，更从平时和各种角色的沟通
  • 如何为rich:tree不同类型节点设置右键菜单 sunjing contextMenutreeRichfaces
    组合使用target和targetSelector就可以啦，如下： <rich:tree id="ruleTree" value="#{treeAction.ruleTree}" var="node" nodeType="#{node.type}" selectionChangeListener=&qu
  • 【Redis二】Redis2.8.17搭建主从复制环境 bit1129 redis
    开始使用Redis2.8.17 Redis第一篇在Redis2.4.5上搭建主从复制环境，对它的主从复制的工作机制，真正的惊呆了。不知道Redis2.8.17的主从复制机制是怎样的，Redis到了2.4.5这个版本，主从复制还做成那样，Impossible is nothing! 本篇把主从复制环境再搭一遍看看效果，这次在Unbuntu上用官方支持的版本。   Ubuntu上安装Red
  • JSONObject转换JSON--将Date转换为指定格式 白糖_ JSONObject
    项目中，经常会用JSONObject插件将JavaBean或List<JavaBean>转换为JSON格式的字符串，而JavaBean的属性有时候会有java.util.Date这个类型的时间对象，这时JSONObject默认会将Date属性转换成这样的格式：   {"nanos":0,"time":-27076233600000,
  • JavaScript语言精粹读书笔记 braveCS JavaScript
    【经典用法】：   //①定义新方法 Function .prototype.method=function(name, func){ this.prototype[name]=func; return this; } //②给Object增加一个create方法，这个方法创建一个使用原对
  • 编程之美-找符合条件的整数 用字符串来表示大整数避免溢出 bylijinnan 编程之美
    import java.util.LinkedList; public class FindInteger { /** * 编程之美 找符合条件的整数 用字符串来表示大整数避免溢出 * 题目：任意给定一个正整数N，求一个最小的正整数M(M>1)，使得N*M的十进制表示形式里只含有1和0 * * 假设当前正在搜索由0，1组成的K位十进制数
  • 读书笔记 chengxuyuancsdn 读书笔记
    1、Struts访问资源 2、把静态参数传递给一个动作 3、<result>type属性 4、s:iterator、s:if c:forEach 5、StringBuilder和StringBuffer 6、spring配置拦截器 1、访问资源 (1)通过ServletActionContext对象和实现ServletContextAware,ServletReque
  • [通讯与电力]光网城市建设的一些问题 comsci 问题
          信号防护的问题,前面已经说过了,这里要说光网交换机与市电保障的关系       我们过去用的ADSL线路,因为是电话线,在小区和街道电力中断的情况下,只要在家里用笔记本电脑+蓄电池,连接ADSL,同样可以上网........     
  • oracle 空间RESUMABLE daizj oracle空间不足RESUMABLE错误挂起
    空间RESUMABLE操作  转 Oracle从9i开始引入这个功能，当出现空间不足等相关的错误时，Oracle可以不是马上返回错误信息，并回滚当前的操作，而是将操作挂起，直到挂起时间超过RESUMABLE TIMEOUT，或者空间不足的错误被解决。 这一篇简单介绍空间RESUMABLE的例子。 第一次碰到这个特性是在一次安装9i数据库的过程中，在利用D
  • 重构第一次写的线程池 dieslrae 线程池 python
    最近没有什么学习欲望,修改之前的线程池的计划一直搁置,这几天比较闲,还是做了一次重构,由之前的2个类拆分为现在的4个类. 1、首先是工作线程类:TaskThread,此类为一个工作线程,用于完成一个工作任务,提供等待(wait),继续(proceed),绑定任务(bindTask)等方法 #!/usr/bin/env python # -*- coding:utf8 -*-
  • C语言学习六指针 dcj3sjt126com c
    初识指针，简单示例程序： /* 指针就是地址，地址就是指针 地址就是内存单元的编号 指针变量是存放地址的变量 指针和指针变量是两个不同的概念 但是要注意： 通常我们叙述时会把指针变量简称为指针，实际它们含义并不一样 */ # include <stdio.h> int main(void) { int * p; // p是变量的名字， int *
  • yii2 beforeSave afterSave beforeDelete dcj3sjt126com delete
    public function afterSave($insert, $changedAttributes) { parent::afterSave($insert, $changedAttributes); if($insert) { //这里是新增数据 } else { //这里是更新数据 } }  
  • timertask shuizhaosi888 timertask
    java.util.Timer timer = new java.util.Timer(true); // true 说明这个timer以daemon方式运行（优先级低， // 程序结束timer也自动结束），注意，javax.swing // 包中也有一个Timer类，如果import中用到swing包， // 要注意名字的冲突。 TimerTask task = new
  • Spring Security（13）——session管理 234390216 sessionSpring Security攻击保护超时
    session管理 目录   1.1     检测session超时 1.2     concurrency-control 1.3     session 固定攻击保护         
  • 公司项目NODEJS实践0.3[ mongo / session ...] 逐行分析JS源代码 mongodbsessionnodejs
        http://www.upopen.cn   一、前言         书接上回，我们搭建了WEB服务端路由、模板等功能，完成了register 通过ajax与后端的通信，今天主要完成数据与mongodb的存取，实现注册 / 登录 /
  • pojo.vo.po.domain区别 LiaoJuncai javaVOPOJOjavabeandomain
    　　POJO = "Plain Old Java Object"，是MartinFowler等发明的一个术语，用来表示普通的Java对象，不是JavaBean, EntityBean 或者 SessionBean。POJO不但当任何特殊的角色，也不实现任何特殊的Java框架的接口如，EJB， JDBC等等。 　　 　　即POJO是一个简单的普通的Java对象，它包含业务逻辑
  • Windows Error Code OhMyCC windows
    0 操作成功完成. 1 功能错误. 2 系统找不到指定的文件. 3 系统找不到指定的路径. 4 系统无法打开文件. 5 拒绝访问. 6 句柄无效. 7 存储控制块被损坏. 8 存储空间不足, 无法处理此命令. 9 存储控制块地址无效. 10 环境错误. 11 试图加载格式错误的程序. 12 访问码无效. 13 数据无效. 14 存储器不足, 无法完成此操作. 15 系
  • 在storm集群环境下发布Topology roadrunners 集群stormtopologyspoutbolt
    storm的topology设计和开发就略过了。本章主要来说说如何在storm的集群环境中，通过storm的管理命令来发布和管理集群中的topology。   1、打包 打包插件是使用maven提供的maven-shade-plugin，详细见maven-shade-plugin。 <plugin> <groupId>org.apache.maven.
  • 为什么不允许代码里出现“魔数” tomcat_oracle java
    　　在一个新项目中，我最先做的事情之一，就是建立使用诸如Checkstyle和Findbugs之类工具的准则。目的是制定一些代码规范，以及避免通过静态代码分析就能够检测到的bug。 　　迟早会有人给出案例说这样太离谱了。其中的一个案例是Checkstyle的魔数检查。它会对任何没有定义常量就使用的数字字面量给出警告，除了-1、0、1和2。 　　很多开发者在这个检查方面都有问题，这可以从结果
  • zoj 3511 Cake Robbery(线段树) 阿尔萨斯 线段树
    题目链接：zoj 3511 Cake Robbery 题目大意：就是有一个N边形的蛋糕，切M刀，从中挑选一块边数最多的，保证没有两条边重叠。 解题思路：有多少个顶点即为有多少条边，所以直接按照切刀切掉点的个数排序，然后用线段树维护剩下的还有哪些点。 #include <cstdio> #include <cstring> #include <vector&
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他