bootstrap瀑布流代码
<extend name="Base/common" />
<block name="search-cate"> <include file="Public/jlbnav" /></BLOCK>
<block name="content">
<div class="container mt20">
<div class="container-fluid" id="masonry"> </div> <div id="masonry_ghost" class="hide">
<volist name="list" id="vo">
<div class="thumbnail">
<div class="imgs">
<input type="hidden" value="/{$vo.thumb}">
</div>
<div class="caption">
<div class="title">{$i}简单OA管理系统</div>
<div class="content"> </div>
<div class="author">by <a target="_blank" href="">小小生</a></div>
</div>
</div>
</volist> </div>
</div>
加bootstrap jquery js
<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.2.2/masonry.pkgd.js"></script>
<script src="http://fineui.com/lib/imagesloaded.pkgd.min.js"></script>
<script src="http://fineui.com/lib/lightbox-2.6.min.js"></script>
<script>
$(function() { var ghostNode = $('#masonry_ghost').find('.thumbnail'), i, ghostIndexArray = []; //定义变量
var ghostCount = ghostNode.length; for(i=0; i<ghostCount; i++){
ghostIndexArray[i] = i;
}
ghostIndexArray.sort(function(a, b) {
if(Math.random() > 0.5) {
return a - b;
} else {
return b - a;
}
});
//上面js是页面打开时自动加载运算,随机排列。
var currentIndex = 0;
var masNode = $('#masonry');//要加载的div主框架
var imagesLoading = false;//标记 function getNewItems() {
var newItemContainer = $('<div/>');
for(var i=0; i<12; i++) {
if(currentIndex < ghostCount) {
newItemContainer.append(ghostNode.get(ghostIndexArray[currentIndex]));
currentIndex++;
}
}
return newItemContainer.find('.thumbnail');
} function processNewItems(items) {
items.each(function() {
var $this = $(this);
var imgsNode = $this.find('.imgs');
var title = $this.find('.title').text();
var author = $this.find('.author').text();
title += ' (' + author + ')';
var lightboxName = 'lightbox_'; // + imgNames[0]; var imgNames = imgsNode.find('input[type=hidden]').val().split(',');
$.each(imgNames, function(index, item) {
imgsNode.append('<a href="'+ item +'" data-lightbox="'+ lightboxName +'" title="'+ title +'"><img src="'+ item +'" /></a>');
});
});
} function initMasonry() {
var items = getNewItems().css('opacity', 0);
processNewItems(items);
masNode.append(items); imagesLoading = true;
items.imagesLoaded(function(){
imagesLoading = false;
items.css('opacity', 1);
masNode.masonry({
itemSelector: '.thumbnail',
isFitWidth: true
});
});
} function appendToMasonry() {
var items = getNewItems().css('opacity', 0); processNewItems(items);
masNode.append(items); imagesLoading = true;
items.imagesLoaded(function(){
imagesLoading = false;
items.css('opacity', 1);
masNode.masonry('appended', items);
});
} function ajaxItem(){
var items = $('#masonry_ghost').find('.thumbnail').css('opacity', 0);
processNewItems(items);
masNode.append(items);
imagesLoading = true; items.imagesLoaded(function(){ items.css('opacity', 1);
masNode.masonry('appended', items);
imagesLoading = false;
});
} initMasonry();
var page =2; //分页
var ttt=1;
$(window).scroll(function() {
if(arguments.callee.timer) clearTimeout(arguments.callee.timer);//解决FIRFOX下滚动多次
if($(document).height() - $(window).height() - $(document).scrollTop() < 30) {
arguments.callee.timer = setTimeout(getdiv,400);
} }); function getdiv(){
if(!imagesLoading) {
$.ajax({
url: '{:U("Tulebu/getsharedata")}',
type: 'POST',
dataType: 'text',
data: {'page': page},
async:false,
})
.done(function(data) {
if(data.length<2){
imagesLoading = true;
return;
}
$('#masonry_ghost').append(data);
page+=1;
ajaxItem();
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});
}
} function randomColor() {
var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16);
for (; rand.length < 6;) {
rand = '0' + rand;
}
return '#' + rand;
} // var page=0;
// function getdata(){
// $.$.post('{:U('Julebu/')}', param1: 'value1', function(data, textStatus, xhr) {
// /*optional stuff to do after success */
// });
// } });
</script>
</block>
bootstrap瀑布流代码的更多相关文章
- iOS开发:代码通用性以及其规范 第一篇(附带,自定义UITextView\进度条\双表显示\瀑布流 代码设计思路)
在iOS团队开发中,我见过一些人的代码,也修改过他们的代码.有的人的代码写的非常之规范.通用,几乎不用交流,就可以知道如何修改以及在它基础上扩展延生.有的人的代码写的很垃圾,一眼看过去,简直会怀疑自己 ...
- Jquery简单瀑布流代码示例
最近很多网站都采用瀑布流风格设计,感觉挺有个性的,比较合适做图片类型的网站,没事仿开心网做一个瀑布流示例. 需要用到Jquery,jquery.masonry.min.js <!DOCTYPE ...
- jquery实现简单瀑布流代码
测试环境:ie8 ff13.0.1 chrome22 可以将分页获取的内容依次填入四个div中,瀑布流的分页可以以多页(比如5页)为单位二次分页,这样可以减少后台算法的复杂度 <!DOCTYP ...
- ios图片瀑布流代码
ios瀑布流,实现简单的瀑布流视图布局,可以显示网络图片,下拉刷新,上拉加载更多. 下载:http://www.huiyi8.com/sc/9087.html
- JavaScript瀑布流代码
function osCode(){ var boxWidth = parseInt($(".item").css('width')), marginTop = parseInt( ...
- jq瀑布流代码
<style> #zh{ position:fixed; width:100%; height:100%; background:url(images/bgblack.png); top: ...
- js 实现图片瀑布流效果,可更改配置参数 带完整版解析代码[waterFall.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...
- 网友微笑分享原创Jquery实现瀑布流特效
首先非常感谢网友微笑的无私分享,此Jquery特效是一款非常流行和实用的瀑布流布局,核心代码只有几十行,是我见过代码量最少的瀑布流布局,非常适合网友们学习哦,希望大家好好看一下这个Jquery特效的原 ...
- [Stephen]页面实现瀑布流源码
项目中使用到的瀑布流代码 @using tZ.Pms.Biz @using tZ.Mvc.Base @model IPageInfo @{ ViewBag.Title = Model.WebTitle ...
随机推荐
- 图论(Tarjan缩点):BZOJ 1194: [HNOI2006]潘多拉的盒子
1194: [HNOI2006]潘多拉的盒子 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 344 Solved: 181[Submit][Stat ...
- 数据结构(主席树):COGS 2211. 谈笑风生
2211. 谈笑风生 ★★★★ 输入文件:laugh.in 输出文件:laugh.out 简单对比时间限制:3 s 内存限制:512 MB [问题描述] 设T 为一棵有根树,我们做如下 ...
- eucalyptus的网络模式
总共有四种网络模式,默认采用的是system模式 SYSTEM Mode 最简单的网络配置.Eucalyptus分配mac地址,使用 Xen Bridge,配合已有的 DHCP DHCP 來分配 IP ...
- hdoj 1711 Number Sequence【求字串在母串中第一次出现的位置】
Number Sequence Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- errno与perror
很多系统函数在错误返回时将错误原因记录在libc定义的全局变量errno中,每种错误原因对应一个错误码,请查阅errno(3)的Man Page了解各种错误码,errno在头文件errno.h中声明, ...
- js点击弹出div层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- android string.xml里的空格字符
在string.xml定义字符串的时候常常要用到空格, 直接用键盘敲的话不知道是几个空格,常常看错了,导致误删. 假设用 来替代空格的话,就好非常多. 另外使用%1$s,%1$d能够在一个字符串里定义 ...
- 开发Mhealth(即:Mobile Health 移动医疗)应用必知的10个掘金点
近 日,著名移动技术咨询公司Research2Guidance发布了最新版的<移动医疗应用开发者经济>报告.在过去的两年半里,iOS和Android 两大主流移动平台上的移动医疗应用(以下 ...
- Android 开源项目android-open-project解析之(三) ScrollView,TimeView,TipView,FlipView
九.ScrollView Discrollview 支持滚动时Item淡入淡出,平移,缩放效果的ScrollView 项目地址:https://github.com/flavienlaurent/di ...
- MYSQL 体系结构图-space结构图