瀑布流随笔

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>

// 在页面加载完成后运行 Masonry
  document.addEventListener('DOMContentLoaded', function() {
    var masonry = new Masonry('#masonry-container', {
      itemSelector: '.message-box',
      columnWidth: '.message-box',
      gutter: 20,
    });
  });

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

.messages-container {
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(300px, 1fr));
	gap: 20px;
  
}

 
.message-box {
  display: inline-block;
  max-width: 100%;
  width: 30%;
  padding: 17px;
  border-radius:50px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  transition: box-shadow 0.3s;
  margin-bottom: 20px;
}


.dark .message-box {
  background-color: #2e2e33;
  color: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

1

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

 .message-box {
		display: inline-block;
		width: 100%;/* 一直没生效，因为@media screen没有放在最下面，有先后顺序的  */
		padding: 10px;
		border-radius:40px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		background-color: #fff;
		transition: box-shadow 0.3s;
		margin-bottom: 20px;


 .messages-container {
		grid-template-columns:  1fr ; 
}

1
2
3
4

markup:
  goldmark:
    renderer:
      unsafe: true