Question

早上好，我要求有一个＆＃34; pinterest＆＃34; 3列布局的样式页面。每列都会匹配相同的高度，但是当我们显示/隐藏＆＃39;内容，我们只希望扩展该列，它（以某种方式），但列然后重新排序。我知道这是列计数应该如何工作，但无论如何强制列保持原样？

http://jsfiddle.net/2joLm7y9/

#columns {
-webkit-column-fill: balance;
-moz-column-fill: balance;
column-fill: balance;

我尝试将列填充从自动更改为平衡，但这似乎不起作用。点击1工作正常，但我认为这是因为隐藏的内容在玩完之后不久。

Answer 1

 $( ".toggleDisplay" ).click(function() {
                $(this).children(".display_none").toggle("slow"); 
            });

body {
	background: url(http://subtlepatterns.com/patterns/scribble_light.png) ;
}

#wrapper {
	width: 90%;
	max-width: 1100px;
	min-width: 800px;
	margin: 50px auto;
}

#columns {
	-webkit-column-count: 3;
	-webkit-column-gap: 10px;
	-webkit-column-fill: auto;
	-moz-column-count: 3;
	-moz-column-gap: 10px;
	-moz-column-fill: auto;
	column-count: 3;
	column-gap: 15px;
	column-fill: auto;
}

.pin {
	display: inline-block;
	background: #FEFEFE;
	border: 2px solid #FAFAFA;
	box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
	margin: 0 2px 15px;
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	column-break-inside: avoid;
	padding: 15px;
	padding-bottom: 5px;
	background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
	opacity: 1;
	
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
}

.pin img {
	width: 100%;
	border-bottom: 1px solid #ccc;
	padding-bottom: 15px;
	margin-bottom: 5px;
}

.pin p {
	font: 12px/18px Arial, sans-serif;
	color: #333;
	margin: 0;
}

@media (min-width: 960px) {
	#columns {
		-webkit-column-count: 4;
		-moz-column-count: 4;
		column-count: 4;
	}
}

@media (min-width: 1100px) {
	#columns {
		-webkit-column-count: 5;
		-moz-column-count: 5;
		column-count: 5;
	}
}


 .display_none {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
	<div id="columns">
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
				Sed feugiat consectetur pellentesque. Nam ac elit risus, 
				ac blandit dui. Duis rutrum porta tortor ut convallis.
				Duis rutrum porta tortor ut convallis.
			</p>
            <div class="toggleDisplay">
                                <button>Click 1</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
		</div>
	
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
			<p>
				Donec a fermentum nisi. 
			</p>
             <div class="toggleDisplay">
                                <button>Click 2</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
		</div>
	
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
			<p>
				Nullam eget lectus augue. Donec eu sem sit amet ligula 
				faucibus suscipit. Suspendisse rutrum turpis quis nunc 
				convallis quis aliquam mauris suscipit.
			</p>
             <div class="toggleDisplay">
                                <button>Click 3</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
		</div>
	
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
			<p>
				Nullam eget lectus augue. Donec eu sem sit amet ligula 
				faucibus suscipit. Suspendisse rutrum turpis quis nunc 
				convallis quis aliquam mauris suscipit.
			</p>
             <div class="toggleDisplay">
                                <button>Click 4</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
		</div>
	
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
			<p>
				Donec a fermentum nisi. Integer dolor est, commodo ut 
				sagittis vitae, egestas at augue. 
			</p>
             <div class="toggleDisplay">
                                <button>Click 5</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
		</div>
	
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
				Sed feugiat consectetur pellentesque. Nam ac elit risus, 
				ac blandit dui. Duis rutrum porta tortor ut convallis.
				Duis rutrum porta tortor ut convallis.
			</p>
             <div class="toggleDisplay">
                                <button>Click 6</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
		</div>	
		
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
			<p>
				Nullam eget lectus augue. Donec eu sem sit amet ligula 
				faucibus suscipit. Suspendisse rutrum turpis quis nunc 
				convallis quis aliquam mauris suscipit.
				Duis rutrum porta tortor ut convallis.
			</p>
             <div class="toggleDisplay">
                                <button>Click 7</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
		</div>
	
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
			<p>
				Nullam eget lectus augue. 
			</p>
             <div class="toggleDisplay">
                                <button>Click 8</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
		</div>
	
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
				Sed feugiat consectetur pellentesque. 
			</p>
             <div class="toggleDisplay">
                                <button>Click 9</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
		</div>
	
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
			<p>
				Donec a fermentum nisi. Integer dolor est, commodo ut 
				sagittis vitae, egestas at augue. Suspendisse id nulla 
				ac urna vestibulum mattis. Duis rutrum porta tortor ut convallis.
			</p>
             <div class="toggleDisplay">
                                <button>Click 10</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
		</div>
	
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
			<p>
				Donec a fermentum nisi. Integer dolor est, commodo ut 
				sagittis vitae, egestas at augue. Suspendisse id nulla 
				ac urna vestibulum mattis. 
			</p>
            
             <div class="toggleDisplay">
                                <button>Click 11</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
		</div>
	
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
				Sed feugiat consectetur pellentesque. Nam ac elit risus, 
				ac blandit dui. Duis rutrum porta tortor ut convallis.
			</p>
             <div class="toggleDisplay">
                                <button>Click 12</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
		</div>	
		
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
			<p>
				Donec a fermentum nisi. Integer dolor est, commodo ut 
				sagittis vitae, egestas at augue. Suspendisse id nulla 
				ac urna vestibulum mattis. 
			</p>
             <div class="toggleDisplay">
                                <button>Click 13</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
		</div>
	
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
			<p>
				Donec a fermentum nisi. Integer dolor est, commodo ut 
				sagittis vitae, egestas at augue. Suspendisse id nulla 
				ac urna vestibulum mattis. 
			</p>
             <div class="toggleDisplay">
                                <button>Click 14</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
		</div>
	
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
				Sed feugiat consectetur pellentesque. Nam ac elit risus, 
				ac blandit dui. Duis rutrum porta tortor ut convallis.
			</p>
             <div class="toggleDisplay">
                                <button>Click 15</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
		</div>
	</div>
</div>

使用带有集成show / hide的列数会移动列

1 个答案: