jQueryのプラグインFreewallを実装したいのですが、うまく実装できません。

https://kombai.github.io/freewall/example/fit-zone.html
Freewallの中でも、このプラグインを実装しようと思っております。

何度か自分で実装を試みたのですが、うまく行きません。

・画像を本来のサイズでレンガ状に配置したいのですが、その方法がわからない
（cssでwidth等を数値指定する○○px→レンガ状になるが、ガチャガチャに重なり合ってしまう。
width等をautoに設定する→縦並びになり、レンガ状に組まれない。）

・DEMOページ、fit-zoneのようなレイアウトをそのまま導入することには成功したのですが、
使用したい画像をどう読みこませればいいのかわからない。
(var wall = new Freewall("#freewall");
の部分に画像を囲んでいるdivIDを読ませれば良いのかな？と思っているのですが、うまくいかないので、
どこがどう間違っているのか、教えていただきたいです。
)

現状のコードはこのような形です。

html
1<!DOCTYPE html>
2<html>
3<head lang="ja">
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6      <script src="../js/jquery-3.5.1.min.js"></script>
7      <script src="freewall.js"></script>
8      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
9
10      <style>
11      body{
12          margin: 0;
13          padding: 0;
14      }
15      .container{
16          display: flex;
17          background: #e4f1fe;
18      }
19      .left{
20          width: 300px;
21          background: #020205;
22          color: #fff;
23          position: fixed;
24          height: 100%;
25          text-align: center;
26          padding-top: 30px;
27      }
28
29      input[type="text"]{
30        border: solid 1px #aaa;
31        border-radius:5px;
32        padding:10px;
33        font-size: 15px;
34      	margin: 3px 0 30px;
35      }
36
37      button[type="submit"]{
38        border: solid 1px #aaa;
39        border-radius:5px;
40        padding:10px;
41        font-size: 15px;
42        margin: 3px 0 40px;
43      }
44
45      nav {
46       background-color: #020205;
47      }
48
49      nav p{
50        width: 300px;
51        line-height: 60px;
52       display: block;
53       color: #fff;
54       font-size: 1em;
55       text-align: center;
56       margin: 0;
57      }
58
59      nav p:hover{
60       background-color: #38b6ff;
61      }
62
63      footer{
64        font-size: 0.5em;
65        text-align: center;
66        margin-top: 30px;
67      }
68
69      .contents{
70          flex: 1;
71          background: #e4f1fe;
72          margin-left: 300px;
73          padding: 10%;
74      }
75
76      /* freewall追記 */
77			.layout {
78				position: relative;
79				padding: 5px;
80			}
81			.header {
82				height: 100%;
83			}
84			.free-wall {
85				width: 100%;
86				height: 100%;
87			}
88
89			@keyframes start {
90				from {
91					transform: scale(0);
92				}
93				to {
94					transform: scale(1);
95				}
96			}
97
98			@-webkit-keyframes start {
99				from {
100					-webkit-transform: scale(0);
101				}
102				to {
103					-webkit-transform: scale(1);
104				}
105			}
106
107			.free-wall .brick[data-state="init"] {
108				display: none;
109			}
110
111			.free-wall .brick[data-state="start"]  {
112				display: block;
113				animation: start 0.5s;
114				-webkit-animation: start 0.5s;
115			}
116
117			.free-wall .brick[data-state="move"]  {
118				transition: top 0.5s, left 0.5s, width 0.5s, height 0.5s;
119				-webkit-transition: top 0.5s, left 0.5s, width 0.5s, height 0.5s;
120			}
121
122      </style>
123
124</head>
125<body>
126<div class="container">
127    <div class="left">
128      <!-- ロゴ -->
129      <p><img src="ロゴ画像.png"> </p>
130      <!-- タイトル -->
131      <p><img src="タイトル画像.png"> </p>
132      <!-- 検索フォーム -->
133      <form id="form2" action="自分のサイトURL" method="get">
134<input id="sbox2"  id="s" name="s" type="text" placeholder="フリーワードを入力"/>
135<button type="submit" id="sbtn2" onclick="location.href='wait.html'"><i class="fas fa-search"></i></button>
136</form>
137<nav>
138   <p>メニュー１</p>
139   <p>メニュー２</p>
140   <p>メニュー３</p>
141   <p>メニュー４</p>
142 </nav>
143 <footer>フッター</footer>
144    </div>
145    <!-- div class left -->
146
147
148
149    <div class="contents">
150
151      <div class="layout">
152			<div id="freewall" class="free-wall">
153      <div class="item"><img src="写真１.jpg"></div>
154　　　　　　（中間は省略しますが、バラバラのサイズのjpg画像が、計26枚あります）
155      <div class="item"><img src="photo/p26.jpg"></div>
156</div>
157<!-- div id freewall class free wall -->
158      		</div>
159          <!-- div class layout -->
160    </div>
161    <!-- div class contents -->
162</div>
163<!-- div class container -->
164
165<!-- freewall -->
166<script type="text/javascript">
167    var temp = "<div class='brick' style='width:{width}px; height: {height}px; background-color: {color}'><div class='cover'>Demo fit zone</div></div>";
168    var colour = [
169      "rgb(142, 68, 173)",
170      "rgb(243, 156, 18)",
171      "rgb(211, 84, 0)",
172      "rgb(0, 106, 63)",
173      "rgb(41, 128, 185)",
174      "rgb(192, 57, 43)",
175      "rgb(135, 0, 0)",
176      "rgb(39, 174, 96)"
177    ];
178
179    var w = 1, h = 1, html = '', color = '', limitItem = 28;
180    for (var i = 0; i < limitItem; ++i) {
181      h = 1 + 3 * Math.random() << 0;
182      w = 1 + 3 * Math.random() << 0;
183      color = colour[colour.length * Math.random() << 0];
184      html += temp.replace(/\{height\}/g, h*150).replace(/\{width\}/g, w*150).replace("{color}", color);
185    }
186    $("#freewall").html(html);
187
188
189    $(function() {
190      var wall = new Freewall("#freewall");
191      wall.reset({
192        selector: '.brick',
193        animate: false,
194        cellW: 160,
195        cellH: 160,
196        delay: 30,
197        onResize: function() {
198          wall.refresh($(window).width() - 30, $(window).height() - 30);
199        }
200      });
201      // caculator width and height for IE7;
202      wall.fitZone($(window).width() - 30 , $(window).height() - 30);
203    });
204  </script>
205</body>
206</html>