用jquery写的position瀑布流布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pin{
padding: 15px 0 0 15px;position: absolute;
}
.box{
padding: 10px;
border:1px solid #ccc;}
.box img{
width:100px;
height:auto;}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div id="main">
<div class="pin">
<div class="box">
<img src="img/1.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/2.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/44.png"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/44.png"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/44.png"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/44.png"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/44.png"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/nav60.png"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/mazha.jpg"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/nav60.png"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/22.jpg"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/33.jpg"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/nav60.png"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div>
<div>
<script>
window.onload=function(){
var screenWidth=$(window).width();
console.log("屏幕宽度："+screenWidth);
var cloumnNum= Math.floor(screenWidth/($('.pin').width())) ;
console.log(cloumnNum)
var cloumnHeight=[];
for(var i=0;i<cloumnNum;i++){
cloumnHeight.push(0)
}
console.log(cloumnHeight)
$("#main .pin").each(function(index){
var elementHeight=$(this).height();
var elementWidth=$(this).width();
console.log(index%(cloumnHeight.length))
$(this).css("left",(index%(cloumnHeight.length))*elementWidth).css("top",(cloumnHeight[index%(cloumnHeight.length)]))
cloumnHeight[index%(cloumnHeight.length)]+=elementHeight;
console.log(cloumnHeight)
})
}
</script>
</body>
</html>
用jquery写的position瀑布流布局的更多相关文章
- 使用jquery+css实现瀑布流布局
虽然可以直接使用css实现瀑布流布局,但显示的方式有点问题,所以这儿就直接使用jquery+css来实现瀑布流布局,最终效果如下: 思路是通过将每个小块的position设置为relativ ...
- jQuery Wookmark Load 瀑布流布局实例演示
瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...
- jQuery Wookmark 瀑布流布局
瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...
- Jquery瀑布流布局
瀑布流布局最近真的很流行,很多人都跟我一样想知道是怎么做出来的吧,经过网上搜索大量的参考结合N边的实验今天终于被我写出来了,为了便于大家理解我使用了jQuery(当然用源生js代码执行的效率会高一些, ...
- jquery实现简单瀑布流布局（续）：图片懒加载
# jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...
- jquery实现简单瀑布流布局
jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...
- Jquery瀑布流布局，jQuery Wookmark Load 示例
瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸同意的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 注意事项:img元素的width和weight属性需要写,否则定位会不准确. 查看j ...
- Ajax+json+jquery实现无限瀑布流布局
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- AJAX+json+jquery实现预加载瀑布流布局
宽度是一定的高度不定的瀑布流布局 也可以说是无缝拼图 当浏览器滚动到底部时候自动加载图片 加载的图片地址用json 在img.js里 ,还有正在加载动画是用 css3制作的 在ff等支持css3可以显 ...
随机推荐
- Nginx超时配置
Nginx超时配置 1.client_header_timeout 语法client_header_timeout time 默认值60s 上下文http server 说明 指定等待client发送 ...
- java中异常处理机制 throw抛出自定义业务逻辑异常 throws继续抛出 catch捕获后会自动继续抛向调用方法
package com.swift; public class Exception_TestC { public static void main(String[] args) { /* * 第5题: ...
- 数据结构实用C语言基础
大纲: 主要介绍了C语言中的指针,内存分配,两种传参方式,typedef的简单用法 关于C语言中的指针: 指针变量也称为指针(Pointer) 例如:int* p; 则p为一个指向int类型的指针. ...
- 洛谷 2387/BZOJ 3669 魔法森林
3669: [Noi2014]魔法森林 Time Limit: 30 Sec Memory Limit: 512 MBSubmit: 3765 Solved: 2402[Submit][Statu ...
- redis学习笔记(1)
最近在学习redis,做了比较详细的学习笔记,分享给大家,欢迎一起讨论和学习 第一部分,简单介绍redis 和 redis的基本操作 NoSQL的特点 : 数据库种类繁多,但是一个共同的特点都是去掉关 ...
- http 基础与通讯原理
目录 http 基础与通讯原理 Internet 与中国 1990年10月 注册CN顶级域名 1993年3月2日 接入第一根专线 1994年4月20日 实现与互联网的全功能连接 1994年5月21日 ...
- 利用wget 和 curl 监控网站是否正常
监控网站URL是否正常最常见的方法莫过于wget和curl命令了,这两个命令都是非常强大,参数也非常多,下面列举几个常用的参数. wget 常用命令参数:--spider ...
- classpath、WEB-INF
classpath是指 WEB-INF文件夹下的classes目录(war包),对于springboot项目打包出来的jar包,里面的就是BOOT-INF: 这个demo的源码结构如下: 可见,jav ...
- 掌握这些Python代码技巧，编程至少快一半！
被人工智能捧红的 Python 已是一种发展完善且非常多样化的语言,其中肯定有一些你尚未发现的功能.本文或许能够让你学到一些新技巧. Python 是世界上最流行.热门的编程语言之一,原因很多,比 ...
- OpenCV中的图像形态学转换
两个基本的形态学操作是腐蚀和膨胀.他们的变化构成了开运算,闭运算,梯度等.下面以这张图为例 1.腐蚀 这个操作会把前景物体的边界腐蚀掉. import cv2 import numpy as np i ...