【发布时间】：2014-01-02 21:24:58
【问题描述】：
所以我正在使用 Isotope 制作一个简单的页面（我以前使用过），这就是我想要它做的：
- 每个元素都应根据所有项目的内部内容调整其高度
- 所有元素需要等宽，一行4个（成立这个）
- 它需要适合 960 像素宽度的 div（已确定）
- 第一个元素应该和两个普通元素一样宽（确定这个）
- 最后一个元素应该有不同的背景颜色和边框半径（确定这个）
唯一不起作用的是内容的自动高度。我有超级简单的代码：
HTML
<section id="content">
<div id="container" class="super-list variable-sizes clearfix">
<div class="element width2">
Dummy text Dummy text Dummy text Dummy text Dummy text
</div>
<div class="element">
<img src="img/img.jpg" alt="" title="" width="200px" height="300px" /><br />
<a href="#" target="_blank">Link</a>
</div>
<div class="element">
<a href="#" target="_blank">link</a>
</div>
<div class="element">
Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text
</div>
<div class="element">
<img src="img/img.jpg" alt="" title="" width="200px" height="400px" /><br />
</div>
<div class="element">
<img src="img/img.jpg" alt="" title="" width="200px" height="300px" /><br />
<a href="#" target="_blank">Link</a>
</div>
<div class="element">
<a href="#" target="_blank">link</a>
</div>
<div class="element">
Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text
</div>
<div class="element">
<img src="img/img.jpg" alt="" title="" width="200px" height="900px" /><br />
</div>
<div class="element">
<img src="img/img.jpg" alt="" title="" width="200px" height="100px" /><br />
<a href="#" target="_blank">Link</a>
</div>
<div class="element">
<a href="#" target="_blank">link</a>
</div>
<div class="element">
Dummy text Dummy text Dummy Dummy text Dummy text Dummy text
</div>
<div class="element vanmij">
<img src="img/img.jpg" alt="" title="" width="200px" height="400px" /><br />
</div>
</div>
</section>
这是我的 javascript：
<script>
$(window).load(function(){
var $container = $('#container');
$container.imagesLoaded( function(){ <- I have no idea what this is, sorry!
$container.isotope({
masonry: {
columnWidth: 240
},
});
});
});
</script>
还有我的 CSS：
/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: -o-transform, opacity;
transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
/* End: Recommended Isotope styles */
/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
/**** Base styles ****/
body {
background: url(img/bg.jpg) fixed no-repeat;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
/**** Isotope styles ****/
/* required for containers to inherit vertical size from window */
#container {
margin-bottom: 20px;
width: 960px;
margin: 0 auto;
}
h1.title {
background: none repeat scroll 0 0 #73BD1E;
color: #FFFFFF;
display: inline-block;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-weight: bold;
margin: 0 auto 10px;
padding: 5px;
text-transform: uppercase;
display: inline-block;
margin: 25px auto;
}
.element {
width: 200px;
margin: 5px;
float: left;
overflow: hidden;
position: relative;
color: #222;
background-color: #FFFFFF;
-webkit-box-shadow: 2px 2px 5px rgba(136, 136, 136, 0.8);
-moz-box-shadow: 2px 2px 5px rgba(136, 136, 136, 0.8);
box-shadow: 2px 2px 5px rgba(136, 136, 136, 0.8);
font-family: Helvetica Neue,Arial;
font-size: 10pt;
opacity: 0.7;
padding: 15px;
}
p {
color: #333333;
font: 12px/16px Verdana,Geneva,Arial,Helvetica,sans-serif;
margin: 10px 0;
}
.element * {
position: absolute;
margin: 0;
}
.variable-sizes .element.width2 { width: 440px; }
.vanmij { background-color:#090;-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; color: #fff; opacity:1;}
.element img {
display: inline-block;
opacity: 1.0;
}
/**** Infinite Scroll ****/
#infscr-loading {
position: fixed;
text-align: center;
bottom: 30px;
left: 42%;
z-index: 100;
background: white;
background: hsla( 0, 0%, 100%, 0.9 );
padding: 20px;
color: #222;
font-size: 15px;
font-weight: bold;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
【问题讨论】：
标签： jquery-isotope