CSS3+HTML5学习笔记三-纯CSS3实现的瀑布布局

以前就觉得，Chinaz中图片瀑布布局很好看，以前也看过别人实现的一些方法，大部分是用js实现的，今天试了一下，用CSS3简单的实现了类似的布局效果，希望对大家有用！Chinaz中的效果：

CSS3+HTML5学习笔记三-纯CSS3实现的瀑布布局_第1张图片

我的代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3瀑布布局</title>
<style>
        .container{
                -webkit-column-width:160px;
                -moz-column-width:160px;
                -o-colum-width:160px;
                -webkit-column-gap:1px;
                -moz-column-gap:1px;
                -o-column-gap:1px;
        }
        div:not(.container){
                -webkit-border-radius:5px;
                -moz-border-radius:5px;
                border-radius:5px;
                background:#D9D9D9;
                border::#CCC 1px solid;
                display:inline-block;
                width:157px;
                position:relative;
                margin:2px;
        }
        .title{
                 line-height:80px; font-size:18px; color:#900;
                 text-align:center;
                 font-family:"Microsoft YaHei";
        }
</style>
</head>

<body>
<section>
        <div class="container">
            <div style="height:80px" class="title">纯CSS3瀑布布局</div>
        <div style="height:260px"></div>
        <div style="height:65px"></div>
        <div style="height:120px"></div>
        <div style="height:145px"></div>
        <div style="height:90px"></div>
        <div style="height:145px"></div>
        <div style="height:160px"></div>
        <div style="height:65px"></div>
        <div style="height:230px"></div>
        <div style="height:140px"></div>
        <div style="height:85px"></div>
        <div style="height:20px"></div>
        <div style="height:145px"></div>
        <div style="height:50px"></div>
              <div style="height:65px"></div>
        <div style="height:230px"></div>
        <div style="height:140px"></div>
        <div style="height:85px"></div>
        <div style="height:20px"></div>
        <div style="height:145px"></div>
        <div style="height:50px"></div>
        <div style="height:145px"></div>
        <div style="height:160px"></div>
        <div style="height:240px"></div>
    </div>
</section>
</body>
</html>

运行效果(FireFox，Google Chrome下测试通过，其他浏览器未做测试~~)：

CSS3+HTML5学习笔记三-纯CSS3实现的瀑布布局_第2张图片

 

 

你可能感兴趣的:(html5)

  • 【大前端系列02】HTML5 Canvas绘图技术全解析：从入门到精通 秦若宸 大前端系列前端html5html
    HTML5Canvas绘图技术全解析系列:「全栈进化：大前端开发完全指南」系列第2篇（共5篇）核心:Canvas绘图技术的基本原理与高级应用技巧引言Canvas是HTML5引入的绘图API，提供可编程的矩形绘图区域，使用JavaScript动态生成图形、图表、动画效果和图像处理。Canvas的本质是一个位图画布，每个像素都可以被精确控制。为什么学习Canvas?创建复杂视觉效果和交互体验高性能图形
  • 「HTML5+Canvas实战」星际空战游戏开发 - 纯前端实现 & 源码即开即用【附演示视频】 果冻kk 前端html5小游戏
    纯前端实现星际空战游戏【简易版】博主上次分享的简易版飞机大战收到了不少建议，今天再给大家来一波福利！带来全新升级的飞机大战进阶版！不仅拥有更丰富的游戏机制和更精美的游戏画面，还加入了超燃的BOSS战斗系统。源码完全免费开放，拿来即用无门槛，欢迎感兴趣的小伙伴下载源码。源码已附文章末尾除了本文介绍的纯前端版本外，我们还开发了一个完整的后端版本，采用Java技术栈实现，包含用户登录注册（安全配置、认证
  • 面试的时候问到了HTML5的新特性有哪些 申朝先生 前端面试问题html5信息可视化前端
    HTML5是对HTML的重要更新，它引入了许多新特性和改进，使Web开发变得更加灵活和强大。以下是一些HTML5的关键新特性：1.新的文档结构元素HTML5引入了一些新的语义化元素，帮助开发者更清晰地结构化网页内容，改善了可访问性和SEO。：定义文档的头部区域，通常包含标题、导航等。：定义文档的底部区域，通常包含版权、联系信息等。：表示一个独立的内容块，通常可以被单独分发或重用（如博客文章、新闻报
  • Web编辑器与Word文档的无缝对接技巧 全武凌(荆门泽优) 前端编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 针对Word文档，百度编辑器提供了哪些便捷的上传与粘贴功能？ 2501_90646449 umeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdfueditor导入ppt
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 大厂 H5 开发实战手册 人工智能_SYBH 课程推荐2025年前后端实战项目1024程序员节大厂H5开发实战手册
    京东凹凸实验室(Aotu.io，英文简称O2)，创立于2015年10月，为掘金最早一批联合编辑，拥有数千关注者。O2对内负责京东PC端首页、多个频道页、小程序版本京东购物、微信手Q京东购物、M端京东、各类营销活动场景HTML5活动等多个业务模块的前端开发工作，对外作为京东的多终端技术品牌一直活跃于掘金、GitHub等知名知识共享平台。O2官网：Aotu.io小册介绍这本小册
  • Canvas 示例：4种超炫的网站动画背景效果 「已注销」 前端css3html5canvas
    今天，我们想分享一些动画背景的灵感。全屏背景图片的网站头部是最新的网页设计趋势，已经持续了一段时间。最近人们一直在转向动画添加更多的视觉兴趣到他们的网站中，在这里我们想向您分享几个使用JavaScript和Canvas创建不同页眉的动画示例。在线演示立即下载您可能感兴趣的相关文章网站开发中很有用的jQuery效果【附源码】分享35个让人惊讶的CSS3动画效果演示十分惊艳的8个HTML5&JavaS
  • Canvas渲染管线解析：从API调用到像素落地的全过程 沐土Arvin 信息可视化前端javascripthtmlcss
    1.Canvas基本定义★了解Canvas是HTML5提供的一个通过JavaScript来绘制图形的元素。它提供了一个空白的绘图区域，开发者可以使用JavaScript脚本在其中绘制各种图形、动画、游戏画面等。2.Canvas使用场景★了解数据可视化：绘制图表、图形等游戏开发：HTML5游戏图像处理：滤镜、像素操作动画效果：创建动态视觉效果交互式图形：绘图应用、设计工具教育演示：数学函数可视化等3
  • 分享一个让 uniapp 微信小程序支持 EventSource 的方法 魔众 uni-app微信小程序notepad++
    微信小程序不支持EventSource（SSE）是一种HTML5标准，旨在提供一种方式来在Web应用中实现异步通信和事件处理。然而，根据现有的信息，uni-app并没有直接支持EventSource，这意味着开发者需要寻找其他技术或替代方案来实现类似的效果。尽管有些主流浏览器支持SSE，但小程序目前还不能兼容这个API，这可能是由于微信平台对新技术的兼容性考虑或是开发生态的限制。一个替代实现方式c
  • java数据透视表插件_纯前端表格控件SpreadJS：新增数据透视表插件等，完美呈现强大的Excel数据分析能力... 天生双下巴 java数据透视表插件
    SpreadJS是一款基于HTML5的纯前端电子表格控件，兼容450种以上的Excel公式，凭借其“高性能、跨平台、与Excel高度兼容”的产品特性，备受以华为、苏宁易购、天弘基金等为代表的企业用户青睐。新版本特性:新增数据透视表插件，拥有强大的Excel数据分析能力在线表格编辑器(控件版)：更易嵌入、秒级加载、灵活定制新增迭代计算功能，可实现高精度计算支持渐进加载、HTML导出支持渐进填充、多列
  • 百度UE（编辑器）如何高效导入Word文档中的图片？ 2501_90699850 umeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdfueditor导入ppt
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • html初学 wgego html前端
    一.什么是HTMLHTML是用来描述网页的一种语言。HTML指的是超文本标记语言:HyperTextMarkupLanguageHTML不是一种编程语言，而是一种标记语言标记语言是一套标记标签(markuptag)HTML使用标记标签来描述网页HTML文档包含了HTML标签及文本内容HTML文档也叫做web页面声明为HTML5文档元素是HTML页面的根元素元素包含了文档的元（meta）数据，如定义
  • HTML/CSS笔记 可能是小李吧 学习笔记csshtml
    思维导图HTML网页的基本结构文档声明，声明当前文档版本迭代网页的版本HTML4XHTML2.0HTML5...文档说明文档说明用来告诉浏览器当前的版本进制二进制十进制八进制十六进制字符编码所有的数据在计算机中储存时都是以二进制形式存储的，文字也不例外。所以一段文字在存储到内存时，都需要转换为二进制编码当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读解码将二进制码转换为字符的过程称为解码
  • 22、web前端开发之html5（三） 跟着汪老师学编程 前端html5
    六.离线存储与缓存在网络环境不稳定或需要优化资源加载速度的场景下，离线存储与缓存技术显得尤为重要。HTML5引入了多种离线存储和缓存机制，帮助开发者提升用户体验。本节将详细介绍ApplicationCache、localStorage、sessionStorage以及IndexedDB等技术，帮助你理解如何在不同场景下选择合适的存储和缓存策略。1、ApplicationCacheApplicati
  • 如何在网页编辑器中使用KindEditor导入Excel文件？ 2501_90699640 编辑器excelumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入word
    要求：开源，免费，技术支持编辑器：KindEditor前端：vue2,vue3,react,vue-cli,html5,后端：java,jsp,springboot,asp.net,php,asp,.netcore,.netmvc,.netform功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows
  • “网页编辑器新技能：UMEDITOR的WORD、PDF导入解决方案？“ weixin_52041354 编辑器wordpdfumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • “百度UM编辑器能否支持粘贴WORD文档并自动上传图片？“ 2501_90646763 umeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdfueditor导入ppt
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • “百度富文本编辑器（UMEDITOR）如何高效导入WORD内容？“ 2501_90646449 umeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdfueditor导入ppt
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • “如何通过UMEDITOR将WORD文档中的图片无缝复制到网页？“ 2501_90646449 umeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdfueditor导入ppt
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • Godot引擎开发：Godot基础入门_发布与分发 chenlz2007 游戏开发godot游戏引擎性能优化网络nginx
    发布与分发在完成游戏开发后，发布和分发游戏是将您的作品展示给玩家的最后一步。Godot引擎提供了多种发布平台，包括Windows、macOS、Linux、HTML5、Android和iOS。本节将详细介绍如何在Godot引擎中准备和发布游戏，涵盖以下内容：项目设置导出模板导出设置导出游戏签名与分发部署到不同平台1.项目设置在发布游戏之前，首先需要确保项目的设置正确无误。项目设置包括但不限于标题、图
  • 探索HTML5 Canvas：创造动态与交互性网页内容的强大工具 qq39138814 html5前端html
    探索HTML5Canvas：创造动态与交互性网页内容的强大工具引言在HTML5的众多新特性中，Canvas无疑是最引人注目的元素之一。它为网页设计师和开发者提供了一个通过JavaScript和HTML直接在网页上绘制图形、图像以及进行动画处理的画布。Canvas的灵活性和强大功能，使得它成为创造动态、交互性网页内容的首选工具。本文将深入探讨HTML5Canvas的基本用法、应用场景以及如何利用它来
  • HTML5大文件分片上传/多线程上传 aryasei html5前端html
    HTML5大文件分片上传/多线程上传前端实现浏览器端大文件分片上传,VUE大文件上传和断点续传的实现，VUE–实现文件的上传-字节流下载详细过程，VUE实现大文件分片上传与断点续传到七牛云，VUE.JS实现大文件分片MD5断点续传，大文件、视频分片上传，断点续传，VUE大文件分片上传/多线程上传，大文件传输解决方案：分片上传/下载限速，原生JS上传大文件分片，浏览器批量大文件上传下载，VUE项目性
  • 深入理解 HTML5 Web Workers：提升网页性能的关键技术解析 梦想家星空 前端html5html
    深入理解HTML5WebWorkers：提升网页性能的关键技术解析引言1.什么是WebWorkers？WebWorkers的特点：2.WebWorkers的使用方式2.1创建一个WebWorker步骤1：创建Worker文件步骤2：在主线程中调用Worker3.WebWorkers的高级应用3.1使用`Blob`方式创建Worker3.2终止Worker4.WebWorkers的应用场景示例：计算
  • Vscode HTML5新增元素及属性 凌冰_ Vscodehtml5前端html
    一、‌HTML5语义化标签HTML5语义化标签（SemanticElements）是一组‌具有明确含义的HTML元素‌，通过标签名称直接描述其内容或结构的功能，而非仅作为样式容器（如或）。它们旨在‌提升网页内容对机器（搜索引擎、屏幕阅读器）和开发者的可读性‌，同时规范化页面结构的表达方式。标签‌‌完整定义‌‌典型使用场景‌‌‌定义文档或内容区块的头部区域，包含标题、导航、标志等。页面顶部导航栏、文
  • HTML5前端第六章节 NaZiMeKiY HTML5html5前端html1024程序员节
    一.标准流，浮动，flex布局1.标准流概念：标准流又叫文档流，指的是标签在页面中默认的排布规则，例如块元素独占一行，行内元素可以一行显示多个等等排布规则2.浮动（1）.作用：让块元素水平排列（2）.属性名：float（3）.属性值：left（左对齐），right（右对齐）.test_one{width:300px;height:300px;background-color:blueviolet;
  • HTML5 drag属性 庆新酱 html
    HTML5drag属性想要对某个元素拖拽，需要首先给元素加上draggable=“true”，默认a标签和img是可以拖动的。1.拖动事件事件分为两类：一被拖动的元素上的事件，二被放置的位置接收到的事件。一、发生在被拖动的元素上的事件事件名触发时机触发次数dragstart当拖动开始时（按下鼠标键并开始移动）触发一次1drag拖动开始后触发，在元素拖动期间会持续触发ndragend拖动结束（释放鼠
  • HTML5 Audio（音频）学习笔记 齐尹秦 HTML学习笔记html5音视频学习
    一、HTML5音频简介HTML5引入了元素，用于在网页中播放音频文件。这使得音频的嵌入变得更加简单和标准化。在HTML5之前，大多数音频是通过插件（如Flash）来播放的，但这种方式存在兼容性问题，因为并非所有浏览器都支持相同的插件。HTML5的元素为音频播放提供了一种标准方法。二、浏览器支持情况InternetExplorer9+、Firefox、Opera、Chrome和Safari都支持元素
  • HTML5 Geolocation（地理定位）学习笔记 齐尹秦 HTML学习笔记html5学习笔记
    一、HTML5Geolocation简介HTML5Geolocation（地理定位）API用于获取用户的地理位置信息。通过这个API，可以获取用户的纬度、经度、海拔等信息。由于地理定位可能涉及用户隐私，因此只有在用户同意的情况下，才能获取其位置信息。GeolocationAPI支持以下浏览器：InternetExplorer9+FirefoxChromeSafariOpera对于拥有GPS的设备（
  • wangEditor能否支持网页直接导入EXCEL文件？操作步骤是什么？ 2501_90694782 umeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdfueditor导入ppt
    要求：开源，免费，技术支持编辑器：wangEditor前端：vue2,vue3,vue-cli,html5后端：java,jsp,springboot,asp.net,php,asp,.netcore,.netmvc,.netform群体：学生,个人用户,外包,自由职业者,中小型网站,博客,场景：数字门户,数字中台,站群,内网，外网，信创国产化环境，web截屏行业：医疗，教育，建筑，政府，党政，国
  • 探索音乐之美：APlayer - 超可爱的HTML5音乐播放器 强和毓Hadley
    探索音乐之美：APlayer-超可爱的HTML5音乐播放器APlayer:lollipop:Wow,suchabeautifulHTML5musicplayer项目地址:https://gitcode.com/gh_mirrors/ap/APlayer在寻找一个既美观又功能齐全的HTML5音乐播放器吗？APlayer，以其小巧可爱的设计和强大的功能，无疑是您的理想选择。这个开源项目将为您带来前所未
  • 用MiddleGenIDE工具生成hibernate的POJO（根据数据表生成POJO类） AdyZhang POJOeclipseHibernateMiddleGenIDE
    推荐:MiddlegenIDE插件,   是一个Eclipse   插件.     用它可以直接连接到数据库,   根据表按照一定的HIBERNATE规则作出BEAN和对应的XML ，用完后你可以手动删除它加载的JAR包和XML文件!     今天开始试着使用
  • .9.png Cb123456 android
      “点九”是andriod平台的应用软件开发里的一种特殊的图片形式，文件扩展名为：.9.png 　　智能手机中有自动横屏的功能,同一幅界面会在随着手机(或平板电脑)中的方向传感器的参数不同而改变显示的方向,在界面改变方向后,界面上的图形会因为长宽的变化而产生拉伸,造成图形的失真变形。 　　我们都知道android平台有多种不同的分辨率，很多控件的切图文件在被放大拉伸后，边
  • 算法的效率 天子之骄 算法效率复杂度最坏情况运行时间大O阶平均情况运行时间
    算法的效率 效率是速度和空间消耗的度量。集中考虑程序的速度，也称运行时间或执行时间，用复杂度的阶(O)这一标准来衡量。空间的消耗或需求也可以用大O表示，而且它总是小于或等于时间需求。   以下是我的学习笔记：   1.求值与霍纳法则，即为秦九韶公式。   2.测定运行时间的最可靠方法是计数对运行时间有贡献的基本操作的执行次数。运行时间与这个计数成正比。
  • java数据结构 何必如此 java数据结构
    Java 数据结构 Java工具包提供了强大的数据结构。在Java中的数据结构主要包括以下几种接口和类： 枚举（Enumeration） 位集合（BitSet） 向量（Vector） 栈（Stack） 字典（Dictionary） 哈希表（Hashtable） 属性（Properties） 以上这些类是传统遗留的，在Java2中引入了一种新的框架-集合框架(Collect
  • MybatisHelloWorld 3213213333332132
    //测试入口TestMyBatis package com.base.helloworld.test; import java.io.IOException; import org.apache.ibatis.io.Resources; import org.apache.ibatis.session.SqlSession; import org.apache.ibat
  • Java|urlrewrite|URL重写|多个参数 7454103 javaxmlWeb工作
     个人工作经验！ 如有不当之处，敬请指点 1.0  web -info 目录下建立     urlrewrite.xml  文件 类似如下： <?xml version="1.0" encoding="UTF-8" ?>   <!DOCTYPE u
  • 达梦数据库+ibatis darkranger sqlmysqlibatisSQL Server
    --插入数据方面 如果您需要数据库自增... 那么在插入的时候不需要指定自增列. 如果想自己指定ID列的值, 那么要设置 set identity_insert  数据库名.模式名.表名; ----然后插入数据; example: create table zhabei.test( id bigint identity(1,1) primary key, nam
  • XML 解析 四种方式 aijuans android
    XML现在已经成为一种通用的数据交换格式,平台的无关性使得很多场合都需要用到XML。本文将详细介绍用Java解析XML的四种方法。 XML现在已经成为一种通用的数据交换格式,它的平台无关性,语言无关性,系统无关性,给数据集成与交互带来了极大的方便。对于XML本身的语法知识与技术细节,需要阅读相关的技术文献,这里面包括的内容有DOM(Document Object
  • spring中配置文件占位符的使用 avords
    1.类 <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" "http://www.springframework.o
  • 前端工程化-公共模块的依赖和常用的工作流 bee1314 webpack
    题记： 一个人的项目，还有工程化的问题嘛？   我们在推进模块化和组件化的过程中，肯定会不断的沉淀出我们项目的模块和组件。对于这些沉淀出的模块和组件怎么管理？另外怎么依赖也是个问题？ 你真的想这样嘛？   var BreadCrumb = require(‘../../../../uikit/breadcrumb’); //真心ugly。  
  • 上司说「看你每天准时下班就知道你工作量不饱和」，该如何回应？ bijian1013 项目管理沟通IT职业规划
    问题：上司说「看你每天准时下班就知道你工作量不饱和」，如何回应         正常下班时间6点，只要是6点半前下班的，上司都认为没有加班。   Eno-Bea回答，注重感受，不一定是别人的         虽然我不知道你具体从事什么工作与职业，但是我大概猜测，你是从事一项不太容易出现阶段性成果的工作
  • TortoiseSVN，过滤文件 征客丶 SVN
    环境： TortoiseSVN 1.8 配置： 在文件夹空白处右键 选择  TortoiseSVN -> Settings 在 Global ignote pattern 中添加要过滤的文件： 多类型用英文空格分开 *name ： 过滤所有名称为 name 的文件或文件夹 *.name ： 过滤所有后缀为 name 的文件或文件夹 --------
  • 【Flume二】HDFS sink细说 bit1129 Flume
    1. Flume配置   a1.sources=r1 a1.channels=c1 a1.sinks=k1 ###Flume负责启动44444端口 a1.sources.r1.type=avro a1.sources.r1.bind=0.0.0.0 a1.sources.r1.port=44444 a1.sources.r1.chan
  • The Eight Myths of Erlang Performance bookjovi erlang
    erlang有一篇guide很有意思： http://www.erlang.org/doc/efficiency_guide 里面有个The Eight Myths of Erlang Performance： http://www.erlang.org/doc/efficiency_guide/myths.html   Myth: Funs are sl
  • java多线程网络传输文件(非同步)-2008-08-17 ljy325 java多线程socket
    利用 Socket 套接字进行面向连接通信的编程。客户端读取本地文件并发送；服务器接收文件并保存到本地文件系统中。 使用说明:请将TransferClient, TransferServer, TempFile三个类编译，他们的类包是FileServer. 客户端: 修改TransferClient: serPort, serIP, filePath, blockNum,的值来符合您机器的系
  • 读《研磨设计模式》-代码笔记-模板方法模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet;
  • 配置心得 chenyu19891124 配置
    时间就这样不知不觉的走过了一个春夏秋冬，转眼间来公司已经一年了，感觉时间过的很快，时间老人总是这样不停走，从来没停歇过。 作为一名新手的配置管理员，刚开始真的是对配置管理是一点不懂，就只听说咱们公司配置主要是负责升级，而具体该怎么做却一点都不了解。经过老员工的一点点讲解，慢慢的对配置有了初步了解，对自己所在的岗位也慢慢的了解。 做了一年的配置管理给自总结下： 1.改变 从一个以前对配置毫无
  • 对“带条件选择的并行汇聚路由问题”的再思考 comsci 算法工作软件测试嵌入式领域模型
    2008年上半年，我在设计并开发基于”JWFD流程系统“的商业化改进型引擎的时候，由于采用了新的嵌入式公式模块而导致出现“带条件选择的并行汇聚路由问题”(请参考2009-02-27博文)，当时对这个问题的解决办法是采用基于拓扑结构的处理思想，对汇聚点的实际前驱分支节点通过算法预测出来，然后进行处理，简单的说就是找到造成这个汇聚模型的分支起点，对这个起始分支节点实际走的路径数进行计算，然后把这个实际
  • Oracle 10g 的clusterware 32位 下载地址 daizj oracle
    Oracle 10g 的clusterware 32位 下载地址 http://pan.baidu.com/share/link?shareid=531580&uk=421021908 http://pan.baidu.com/share/link?shareid=137223&uk=321552738 http://pan.baidu.com/share/l
  • 非常好的介绍：Linux定时执行工具cron dongwei_6688 linux
    Linux经过十多年的发展，很多用户都很了解Linux了，这里介绍一下Linux下cron的理解，和大家讨论讨论。cron是一个Linux 定时执行工具，可以在无需人工干预的情况下运行作业，本文档不讲cron实现原理，主要讲一下Linux定时执行工具cron的具体使用及简单介绍。 新增调度任务推荐使用crontab -e命令添加自定义的任务（编辑的是/var/spool/cron下对应用户的cr
  • Yii assets目录生成及修改 dcj3sjt126com yii
    assets的作用是方便模块化，插件化的，一般来说出于安全原因不允许通过url访问protected下面的文件，但是我们又希望将module单独出来，所以需要使用发布，即将一个目录下的文件复制一份到assets下面方便通过url访问。 assets设置对应的方法位置 \framework\web\CAssetManager.php   assets配置方法 在m
  • mac工作软件推荐 dcj3sjt126com mac
    mac上的Terminal + bash ＋ screen组合现在已经非常好用了，但是还是经不起iterm＋zsh＋tmux的冲击。在同事的强烈推荐下，趁着升级mac系统的机会，顺便也切换到iterm＋zsh＋tmux的环境下了。 我为什么要要iterm2 切换过来也是脑袋一热的冲动，我也调查过一些资料，看了下iterm的一些优点： * 兼容性好，远程服务器 vi 什么的低版本能很好兼
  • Memcached(三)、封装Memcached和Ehcache frank1234 memcachedehcachespring ioc
    本文对Ehcache和Memcached进行了简单的封装，这样对于客户端程序无需了解ehcache和memcached的差异，仅需要配置缓存的Provider类就可以在二者之间进行切换，Provider实现类通过Spring IoC注入。 cache.xml <?xml version="1.0" encoding="UTF-8"?>
  • Remove Duplicates from Sorted List II hcx2013 remove
    Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct numbers from the original list. For example,Given 1->2->3->3->4->4->5,
  • Spring4新特性——注解、脚本、任务、MVC等其他特性改进 jinnianshilongnian spring4
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • MySQL安装文档 liyong0802 mysql
      工作中用到的MySQL可能安装在两种操作系统中，即Windows系统和Linux系统。以Linux系统中情况居多。   安装在Windows系统时与其它Windows应用程序相同按照安装向导一直下一步就即，这里就不具体介绍，本文档只介绍Linux系统下MySQL的安装步骤。   Linux系统下安装MySQL分为三种：RPM包安装、二进制包安装和源码包安装。二
  • 使用VS2010构建HotSpot工程 p2p2500 HotSpotOpenJDKVS2010
    1. 下载OpenJDK7的源码：      http://download.java.net/openjdk/jdk7      http://download.java.net/openjdk/      2. 环境配置     ▶
  • Oracle实用功能之分组后列合并 seandeng888 oracle分组实用功能合并
    1       实例解析 由于业务需求需要对表中的数据进行分组后进行合并的处理，鉴于Oracle10g没有现成的函数实现该功能，且该功能如若用JAVA代码实现会比较复杂，因此，特将SQL语言的实现方式分享出来，希望对大家有所帮助。如下： 表test 数据如下： ID,SUBJECTCODE,DIMCODE,VALUE 1&nbs
  • Java定时任务注解方式实现 tuoni javaspringjvmxmljni
    Spring 注解的定时任务，有如下两种方式： 第一种： <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans"  xmlns:xsi="http
  • 11大Java开源中文分词器的使用方法和分词效果对比 yangshangchuan word分词器ansj分词器Stanford分词器FudanNLP分词器HanLP分词器
    本文的目标有两个： 1、学会使用11大Java开源中文分词器 2、对比分析11大Java开源中文分词器的分词效果 本文给出了11大Java开源中文分词的使用方法以及分词结果对比代码，至于效果哪个好，那要用的人结合自己的应用场景自己来判断。 11大Java开源中文分词器，不同的分词器有不同的用法，定义的接口也不一样，我们先定义一个统一的接口： /** * 获取文本的所有分词结果, 对比
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他