求教,如何用jQuery或其他方法实现两个div的间距设置。

是这样的,我是用到瀑布流布局。

共有4列,每列1个div。每个div设置margin-right:20px,但这样页面最右边的div就多了个右边距。

如果不是瀑布流布局就就很简单了,关键是瀑布流布局,每个div的位置是不一定的,我无法用margin-right:0对某个div定义。

所以我想能否用jQuery或其他方法对两个div的间距进行定义,这样就避免了最边上div的右间距问题。

谢谢。

一下是相关代码,JS中定义的变量margin就是你所说的每个div的间距,这样你就不用去设置margin-right了。
另外,在运行我贴上的代码的时候请应用jquery类库

<style type="text/css">
body, ul, li, h3 { margin: 0; padding: 0; list-style: none; font: bold 12px "微软雅黑"; }
/*瀑布流布局样式*/
#lxf-box { position: relative; }
#lxf-box li { position: absolute; background: #fff; border: solid 1px #ccc; text-align: center; padding: 10px; left: 0px; top: 0; }
h3 { padding-top: 8px; }
img { width: 200px; height: auto; display: block; border: 0 }
/*css3动画*/
li { -webkit-transition: all .7s ease-out .1s; -moz-transition: all .7s ease-out; -o-transition: all .7s ease-out .1s; transition: all .7s ease-out .1s }
</style>

<ul id="lxf-box">
<li><a ><img /></a>
<h3>图片标题</h3>
</li>
<li><a ><img /></a>
<h3>图片标题</h3>
</li>
<li><a ><img /></a>
<h3>图片标题</h3>
</li>
<li><a ><img /></a>
<h3>图片标题</h3>
</li>
<li><a ><img /></a>
<h3>图片标题</h3>
</li>
<li><a ><img /></a>
<h3>图片标题</h3>
</li>
<li><a ><img /></a>
<h3>图片标题</h3>
</li>

</ul>

<script>
/*
原理:1.把所有的li的高度值放到数组里面
2.第一行的top都为0
3.计算高度值最小的值是哪个li
4.把接下来的li放到那个li的下面
*/

var margin = 10; //这里设置间距
var li=$("li"); //这里是区块名称
varli_W = li[0].offsetWidth+margin; //取区块的实际宽度(包含间距,这里使用源生的offsetWidth函数,不适用jQuery的width()函数是因为它不能取得实际宽度,例如元素内有pandding就不行了)
function liuxiaofan(){//定义成函数便于调用
var h=[];//记录区块高度的数组
var n = document.documentElement.offsetWidth/li_W|0;//窗口的宽度除以区块宽度就是一行能放几个区块
for(var i = 0;i < li.length;i++) {//有多少个li就循环多少次
li_H = li[i].offsetHeight;//获取每个li的高度
if(i < n) {//n是一行最多的li,所以小于n就是第一行了
h[i]=li_H;//把每个li放到数组里面
li.eq(i).css("top",0);//第一行的Li的top值为0
li.eq(i).css("left",i * li_W);//第i个li的左坐标就是i*li的宽度
}
else{
min_H =Math.min.apply(null,h) ;//取得数组中的最小值,区块中高度值最小的那个
minKey = getarraykey(h, min_H);//最小的值对应的指针
h[minKey] += li_H+margin ;//加上新高度后更新高度值
li.eq(i).css("top",min_H+margin);//先得到高度最小的Li,然后把接下来的li放到它的下面
li.eq(i).css("left",minKey * li_W);//第i个li的左坐标就是i*li的宽度
}
$("h3").eq(i).text("编号:"+i+",高度:"+li_H);//把区块的序号和它的高度值写入对应的区块H3标题里面
}
}
/* 使用for in运算返回数组中某一值的对应项数(比如算出最小的高度值是数组里面的第几个) */
function getarraykey(s, v) {for(k in s) {if(s[k] == v) {return k;}}}
/*这里一定要用onload,因为图片不加载完就不知道高度值*/
window.onload = function() {liuxiaofan();};
/*浏览器窗口改变时也运行函数*/
window.onresize = function() {liuxiaofan();};
</script>
</body>
</html>
温馨提示:内容为网友见解,仅供参考
第1个回答  2015-06-30
设置两个div之间的间距,方法有很多种,常见的方法如下:
1、对样式的设置来完成间距设置:
<div style="margin-bottom:___px;"></div><div></div>
或者
<div></div><div style="margin-top:___px;"></div>
2、在css中设置div间距,如:
<div id="div1"></div><div id="div2"></div>
<style type="text/stylesheet">
#div1{margin-bottom:___px;}

#div2{margin-top:___px;}
</style>
3、使用JavaScript或者jQuery设置,如:
<div id="div1"></div><div id="div2"></div>
<script type="text/javascript">
$("#div1").attr("style","margin-bottom:___px");

$("#div2").css("margin-top","___px");
</script>
第2个回答  2013-02-16
请问你的瀑布流是如何实现的?

如果每个div都是绝对定位的话,不需要考虑 margin-right.

如果是固定列的位置,往下排div的话, 设置列的margin-right就行了啊.追问

我的瀑布流是用jQuery+Masonry插件。

我没有设置固定的4列,而是将div放在一个980px的大盒子里,然后里面独立的div就按照既定规则自己排列,因为有980px的大盒子,所以正好能放下4个div。

追答

把div的margin去掉

调用 Masonry 的时候添加上这个参数 gutterWidth , 是用来控制 列之间 距离的

$('#container').masonry({
itemSelector: '.box',
columnWidth: 100,
gutterWidth: 40
});

第3个回答  2013-02-16
设置它们的父容器的margin-right:-20px可以不,互相抵消掉追问

测试过了,这个一用更乱套了,谢谢你。

第4个回答  2013-02-20
你可以找就query插件进行布局管理

求教,如何用jQuery或其他方法实现两个div的间距设置。
1、对样式的设置来完成间距设置: <div style="margin-bottom:___px;"><\/div><div><\/div> 或者 <div><\/div><div style="margin-top:___px;"><\/div>2、在css中设置div间距,如: <div id="div1"><\/div><div id="div2"><\/div> <style type="text\/stylesheet"> #div1{margin-bottom:___p...

两个DIV,一个在上,一个在下
用jQuery实现吧,实现原理就是改变2个div的“z-index”,代码如下 ("#div1"),css("z-index",99);\/\/div1为第一个div的id ("#div2"),css("z-index",100);\/\/div2为第二个div的id 这样设置的结果是div1被div2遮蔽住。

div横向排列循环怎么实现间距相等
如下例(使用jQuery):<style> .abc { width: 200px; margin-right: 20px; } .last { margin-right: 0; }<\/style><script>\/\/设container为div的父元素的id\/\/循环代码中添加以下语句,为给最后一个div添加class $("#container div").last().addClass("last");<\/script> ...

两个并排浮动的div,怎么让一个div的高度(比较短的div)与长的一样
用jq实现 <div id="leftbox"><\/div> <div id="rightbox"><\/div> <script type="text\/javascript" src="https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.1\/jquery.min.js"><\/script> <script type="text\/javascript"> (function(){ if($("#left").height() > $("#right").he...

如何用jq或js控制一个div的高度随着另一个div的高度的变化而变化
最简单的实现方式:仅提供一个思路。可以自己完善。<body><input type="button" id="btn" value="变大" \/><div style="width:100px; height:100px; border:1px solid #ccc; float:left;" id="div1"><\/div> <div id="div2"><\/div><\/body><script>var oBtn = document.getElement...

如何在一个div内嵌套两个div?
1、打开编辑器,新建test.html,用于学习今天的内容。如下图所示:2、接下来需要在head标签下方引入jquery.min.js插件,如下图所示:3、在页面的body标签里,新建一个div,名称为test。如下图所示:4、在body标签下方写上<script><\/script>,用来存放js代码。通过class定位到div,通过css()方法让文字...

jQuery怎么将div设置为水平垂直居中
一、使用工具:jQuery、编辑软件 二、方法有三:1、CSS实现水平和垂直居中:要让DIV水平和垂直居中,必需知道该DIV得宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的。2、如果当页面DIV宽度和高度是动态的,比方说需要弹出一个DI...

JS或者jquery做 一个div不随滚动条上下移动改变位置的效果,就是div始 ...
不用CSS是行不通的,js或jquery做出的效果,也是使用了css中的相关属性。只不过,使用js或jquery后可以增加更多效果

两个同级div重叠如何解决
两个同级div重叠的问题可以通过以下方法解决:1、使用CSS的z-index属性,将需要显示在上方的div的z-index值设置为大于另一个div的z-index值。这样,较高z-index的div将会显示在较低z-index的div上方。2、使用HTML的display属性,将两个div的display属性都设置为block。这样,两个div将会以块级元素的...

怎样让两个div保持相同的高度
1、新建一个html文件,命名为test.html,用于讲解jquery怎么设置div高度。2、在test.html文件内,引入jquery.min.js库文件,成功加载该文件,才能使用jquery中的方法。3、在test.html文件内,使用div标签创建一个模块,并使用css设置其宽度为50px,背景颜色为红色。4、在test.html文件内,设置div标签的...

相似回答